Discussion :

[mysianne]

Bonjour,
mon problème porte comme indiqué dans le titre sur le déclenchement d'un événement sur un nœud générer dynamiquement. en effet, j'ai un script qui fabrique un composant et l'ajoute sur la vue. un autre script, doit sélectionner une composant générer et écouter l'arrivé d'un click.
mais rien ne se produit quand je cliques.

voici mes codes:
html:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div id="zone-msg" style="overflow-x: auto">           
</div>
<button id="openC"> Open</button>

javascript:

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
$(document).ready(function() {   
    $zoneChat = $('#zone-msg');
    $('#openC').click(function(evt) {        
        openNewChat();
    });
//*****instruction non exécuté*****
     $('.chat-container').click(function(evt) {        
        alert('Test');
    });
});
function openNewChat(id, name) {
    var texteZone = '<div class="chat-container">'
            + '<h5 style="margin: 0px;" align="center" >Conversation avec '
            + '<img src="resources/img/no.png" class="closet"  style="float: right"/></h5>'
            + '<div  class="chat-result">'
            + '</div>'
            + '<div class="chat-bottom">'
            + '<input type="submit" value="Send" style="float: right"/>'
            + '<input type="text"  style="width: 98%; height: 38px" />'
            + '</div>'
            + '</div>';
    $zoneChat.append(texteZone);    
}

j'ai déjà vérifier par d'autres moyens que le composant en question existe bien dans le DOM de la page

[kakashi99]

salut,

pour ton cas il faut utiliser .on() au lieu de .click()

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
$('.chat-container').on('click', function(evt) {
});

[Bovino]

j'ai déjà vérifier par d'autres moyens que le composant en question existe bien dans le DOM de la page

Tu déclares au chargement de la page ($(document).ready(...)) un gestionnaire d'événement pour l'élément '.chat-container'.
Or à ce moment là, l'utilisateur n'a pas encore pu cliquer sur l'élément '#openC' donc la fonction openNewChat() n'a pas encore été appelée donc l'élément '.chat-container' n'existe pas dans le DOM.

[mysianne]

Merci pour vos réponse rapide.

Tu déclares au chargement de la page ($(document).ready(...)) un gestionnaire d'événement pour l'élément '.chat-container'.
Or à ce moment là, l'utilisateur n'a pas encore pu cliquer sur l'élément '#openC' donc la fonction openNewChat() n'a pas encore été appelée donc l'élément '.chat-container' n'existe pas dans le DOM.

je fais un click sur un autre bouton de la page et je compte les éléments dont l'attribut class est chat-container.
dans mon cas, où dois-je donc déclarer le gestionnaire d’événement?
kakashi99

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$('#zone-msg .chat-container').on('click', function (){
    alert('Ok') ;
});

ne marche toujours pas !

[-Rpass-]

essaie de mettre ton

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$('.chat-container').click(function(evt) {        
        alert('Test');
    });

à la fin de ta méthode openNewChat() afin que ton élément de classe chat-container soit déjà crée et du coup que ton évènement puisse être interprété

[kakashi99]

étrange...

essaye ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
$('#zone-msg').on('click', '.chat-container', function(evt) {
  console.log('hello');
});

[mysianne]

Merci les gars pour vos réponses. les deux approches marchent à merveille.