auditeur jQuery ne pas « écouter » à des événements sur les éléments DOM créé dynamiquement

Question

J'ai un auditeur comme ceci:

$('.delete').click(function() { 
    ...some stuff 
}); 

En outre, sur la même page, un autre script ajouter dynamiquement des éléments au DOM de cette façon :

$('#list').append('<tr><td><a class="delete" href="#">delete</a></td></tr>'); 

Mon problème est que l'écouteur n'écoute pas ces éléments créés dynamiquement.

Quelqu'un peut-il jeter de la lumière s'il vous plaît?

Answer 1

Il écoute uniquement les éléments qui existaient lorsque vous avez lié le gestionnaire d'événements. Si vous voulez qu'il écoute les éléments créés dynamiquement, vous voulez utiliser la fonction live(), qui fonctionne avec les éléments actuels et futurs.

EDIT: comme de jQuery 1.7, la méthode recommandée est d'utiliser la fonction .on(), qui remplace .bind(), .live() et .delegate() en fournissant toutes les fonctionnalités requises pour la fixation des gestionnaires d'événements.

Answer 2

Bien sûr.

L'écouteur dynamique n'est pas dynamique.

$('.delete').click(function() { 

connecte un écouteur à tous les éléments existants.

Lorsque vous ajoutez un autre élément, vous devez le réexécuter pour vous assurer que les nouveaux éléments sont connectés au même gestionnaire.

Fondamentalement, les nouveaux éléments dont get écouté parce que vous ne joindre de nouveaux gestionnaires à eux)

Answer 3

Oui, consultez la JQuery fonction Live. N'oubliez pas de lier et de dissocier les événements. Il y avait des problèmes où le lien continuait à se lier à chaque fois qu'il était créé, mais comme la page ne rechargeait pas le lien, il y avait 5 ou 6 événements liés à celui-ci, et cela posait des problèmes. juste dû délier les événements au lien.

Answer 4

La liaison d'événements à un élément qui n'existe pas encore est impossible. La façon dont vous pouvez y parvenir, comme Yogurt le sage l'a exprimé, utilise 'on' et spécifie le sélecteur que vous souhaitez utiliser comme deuxième paramètre de la fonction.

this.$someStaticParent.on('click', 'li', functionName); 

Cela permet à l'élément parent de contenir un événement pour un clic. Chaque fois qu'il est cliqué, il va vérifier pour voir d'où vient l'événement, s'il correspond au paramètre deux, il déclenche un événement. C'est ce qu'on appelle la délégation d'événement. Vous autorisez le parent à accepter des événements puis à déclencher les événements après une comparaison réussie. C'est un modèle de conception commun.