HTML ajouté dynamiquement n'étant pas reconnu par jQuery

Question

Lisez d'autres choses ici sur ce problème similaire mais je ne sais pas comment l'appliquer à mon dilemme.

J'ai une fonction jquery qui remplace code HTML dans une liste .. Par exemple, avant exécution de la fonction:

<ul id="mylist"> 
<li id="item1">blah blah blah</li> 
<li id="item2">blah blah blah</li> 
<li id="item3">blah blah blah</li> 
</ul> 

J'ai une autre qui fonctionne sur clic de LI par exemple:

$("#mylist li").click(function() { 
alert($(this).attr("id")); 
}); 

Fonctionne correctement jusqu'à ce que je modifie dynamiquement le #mylist html, où l'alerte est vide.

Comment est-ce que je peux remplacer le #mylist html et être toujours capable de choisir le li trouvé dedans?

Answer 1

Pour maintenir cette fonctionnalité sur tous les futurs éléments de liste dynamiquement ajoutée, vous devez utiliser la délégation de l'événement avec $.on():

$("#mylist").on("click", "li", function(){ 
    alert(this.id); 
}); 

En savoir plus sur $.on(), en ligne à http://api.jquery.com/on/.

Answer 2

Lorsque vous remplacez le contenu de #mylist, vous supprimez également les poignées d'événement précédemment attachées à ses éléments li enfants.

au lieu de la fonction click normale, essayez d'utiliser live function de jQuery:

$("#mylist li").live("click", function() { 
    alert($(this).attr("id")); 
}); 

S'il vous plaît noter que live événements fonctionnent un peu différemment que l'événement traditionnel, en particulier en matière de formation de bulles et d'événements d'annulation. Si c'est un problème, assurez-vous de rattacher les événements de clic après avoir manipulé #mylist. Vous pouvez également utiliser event delegation. Voici un exemple rapide:

$("#mylist").click(function(e) { 
    alert($(e.target).closest("li").attr("id")); 
});