Ajouter un Event Listener pour un élément particulier créé dynamiquement en utilisant jquery

Je crée des éléments dynamiques en utilisant jquery et essayez de lier l'auditeur pour les éléments. En liant l'auditeur en utilisant

$('#div11').on('click',$('#textbox31'),function(e){showPopupImage(e);}); $('#div11').on('click',$('#textbox32'),function(e){alert('hi');});

, Elle ajoute l'auditeur aux descendants même si je spécifie le champ particulier à lier.

Pls, me suggère la bonne façon de gérer ma situation.

Le problème est que vous ne spécifiez pas les paramètres corrects à la fonction on. Si vous regardez la documentation JQuery, vous utilisez la surcharge de fonction suivante:

.on (événements [, sélecteur] [, données])

La partie que vous spécifiez de manière incorrecte est le paramètre du selector . Ce paramètre nécessite une chaîne de sélection, pas un objet JQuery.

Ce qui suit fonctionnera:

 $('#div11').on('click','#textbox31',function(e){showPopupImage(e);}); $('#div11').on('click','#textbox32',function(e){alert('hi');});

Remarquez que j'ai remplacé $('#textbox31') par '#textbox31' .

Voici un exemple de travail , vous verrez que l'événement de clic n'est pas appliqué à textbox33 et à la zone de textbox34

Essayez:

 $('#div11').on('click', '#textbox31',function(e){ showPopupImage(e); }); $('#div11').on('click', '#textbox32', function(e) { //do something });

À l'aide de .on (), vous pouvez définir votre fonction une fois, et elle s'exécutera pour tous les éléments ajoutés dynamiquement.