L’écouteur jQuery n’écoute pas les événements sur les éléments DOM créés de manière dynamic

J’ai un auditeur comme ça:

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

De plus, sur la même page, un autre script ajoute dynamicment des éléments au DOM de la manière suivante:

 $('#list').append('delete'); 

Mon problème est que l’auditeur ne “écoute” pas ces éléments créés dynamicment.

Quelqu’un peut-il nous éclairer s’il vous plaît?

Il n’écoutera que 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 dynamicment, vous voulez utiliser la fonction live () , qui fonctionne avec les éléments actuels et futurs.

EDIT: à partir de jQuery 1.7, la méthode recommandée consiste à utiliser la fonction .on () , qui remplace .bind() , .live() et .delegate() en fournissant toutes les fonctionnalités requirejses pour attacher des gestionnaires d’événements.

Lier des événements à un élément qui n’existe pas encore est impossible. Pour y parvenir, comme le dit si bien le yaourt, utilisez ‘on’ et spécifiez le sélecteur que vous souhaitez utiliser comme second paramètre de la fonction.

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

Cela indique à l’élément parent de conserver un événement par clic. Chaque fois que vous cliquez dessus, il vérifie d’où provient l’événement. S’il correspond au paramètre deux, il déclenche un événement. Ceci s’appelle la délégation d’événement. Vous autorisez le parent à accepter des événements, puis à les déclencher sur la base d’une comparaison réussie. Ceci est un modèle de conception commun.

Oui, consultez la fonction JQuery Live. Rappelez-vous également de lier et de délier les événements. avait des problèmes où le lien continuait à être lié à chaque fois qu’il était créé, mais étant donné que la page ne rechargeait pas le lien, des événements de 5 ou 6 clics y étaient liés, ce qui causait des problèmes. Il suffit de dissocier les événements du lien.

Sûr.

L’écouteur dynamic n’est pas dynamic.

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

raccorde un auditeur à tous les éléments existants.

Lorsque vous ajoutez un autre élément, vous devez l’exécuter à nouveau pour vous assurer que les nouveaux éléments reçoivent le même gestionnaire connecté.

Fondamentalement, les nouveaux éléments ne sont pas écoutés car vous ne leur attachez pas de nouveaux gestionnaires;)