IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Evénement click sur plusieurs éléments créés dynamiquement


Sujet :

jQuery

  1. #1
    Membre habitué
    Profil pro
    Inscrit en
    Août 2007
    Messages
    248
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Août 2007
    Messages : 248
    Points : 134
    Points
    134
    Par défaut Evénement click sur plusieurs éléments créés dynamiquement
    Bonsoir, je suis face à nouvel obstacle : comment écouter le clic sur un élément spécifique créé parmi n éléments créés dynamiquement.
    Voici mon code:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
     
    function retourAjax_25(data){ 
    	var tab=data;
        //Si pas d"erreur
        if (tab["Erreur"]===1){
            //Compter nb éléments dans propriété Joueur du tableau de retour PHP
            var c = -1;
            for (var Joueur in tab) {
                if (tab.hasOwnProperty(Joueur)) ++c;
            }
            //Vider le div conteneur
            $(".espace_g2").empty();
     
     
            //Pour chaque joueur trouvé, une div ContAtt + i,  avec l'avatar, l'estimation de vie et pseudo 
            for (var i = 1; i <= c; i++) {
     
                $(".espace_g2").append("<div class='conteneurAtt' id='ContAtt" + i + "' > </div>");
     
               	$("#ContAtt" + i).css({
    			    'margin-left' : '0px', 
    			    'margin-up' : '10px' // marge extérieure de 10px
    					});
     
               	$("#ContAtt" + i).append(
               		"<img src='" + tab[i]['AvatarJoueur'] + "'class='avatar' id='att" + i + "' height='60' width='60'>"); 
     
                $("#ContAtt" + i).append(
                	"<img src='" + tab[i]['imgEstiVieJoueur'] + "' class='vie' id=" + tab[i]['Joueur'] + " height='60' width='120'>"); 
     
                $("#ContAtt" + i).append(
                	"<div>" + tab[i]['PseudoJoueur'] + "</div>"); 
     
     
            }
     
        }
     
     
    }
    Comment faire pour savoir quel bloc cont & i a été cliqué ? Dois-je créer 50 événements écoutés sur clic ? Possible avec une boucle?
    Besoin : connaitre quel bloc est cliqué me permettrait éventuellement d'avoir l'Id du joueur ciblé.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     
    //S'il clique sur la barre de vie (classe vie avec comme identifiant l'ID du joueur ciblé) :
    $(".ContAtt1").on("click",".vie",function(){
    alert ("Joueur cible=" + $(this).attr('id');
    }
    $(".ContAtt2").on("click",".vie",function(){
    alert ("Joueur cible=" + $(this).attr('id');
    }
    /...
    $(".ContAtt50").on("click",".vie",function(){
    alert ("Joueur cible=" + $(this).attr('id');
    }
    Je sens que le méconnu (de moi) $this peut aider, non?
    Sans me donner la solution, pourriez-vous me dire vers quoi orienter ma recherche?
    J'ai cru voir une "ancienne" méthode bind?

  2. #2
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 396
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 396
    Points : 4 825
    Points
    4 825
    Par défaut
    Salut,

    Dans l'ancienne discussion, tu as corrigé le code de clic sur les .conteneurAtt comme ça :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    $(".espace_g2").on("click",".conteneurAtt",function(e){
        //le code que tu veux exécuter ....
    });
    Mais maintenant tu veux attacher un événement clic à un élément enfant .vie de .conteneurAtt.
    Oublis le code de (50 fois parce qu'il n'a aucun sens...) et modifie le code comme suite :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
     
    $(".espace_g2")
    .on("click",".conteneurAtt",function(){
       console.log("click sur  la classe  :"+$(this).attr('class')+" ayant le id :"+$(this).attr("id"));
    })
    .on("click",".conteneurAtt .vie",function(e){
       e.stopPropagation();
       console.log("click sur "+$(this).attr("class")+" qui est un enfant de "+$(this).parent().attr("id"));
    });
    Voir stopPropagation.

  3. #3
    Membre habitué
    Profil pro
    Inscrit en
    Août 2007
    Messages
    248
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Août 2007
    Messages : 248
    Points : 134
    Points
    134
    Par défaut
    Top, ça fonctionne, je regarde plus en détail cet aprem.
    Merci encore!

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Event au click sur plusieurs éléments du DOM
    Par Hadock dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 06/09/2017, 18h40
  2. [XL-2010] Evènement click sur Optionbutton créé dynamiquement en VBA
    Par dgwww dans le forum Macros et VBA Excel
    Réponses: 3
    Dernier message: 18/03/2016, 19h48
  3. Réponses: 9
    Dernier message: 31/05/2006, 12h56
  4. problème d'accès a des éléments créés dynamiquement
    Par Pymm dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 21/07/2005, 18h13

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo