événement de clic de liaison pour un élément dynamic dans JQuery

J’ai un div qui est rempli dynamicment après avoir appelé un appel AJAX par l’atsortingbut .html

$("#gallery").html(imagesHtml);

insdie imagesHtml j’ai 2 boutons appelés “prebtn” et “nxtbtn” maintenant j’essaie de les lier avec la syntaxe suivante dans JQuery:

 $("#gallery").bind('click', '#nxtbtn', function() { alert('next'); });

 $("#gallery").bind('click', '#prebtn', function() { alert('previous'); });

mais lorsque je clique sur l’un des boutons, les deux événements sont déclenchés et le message allert s’affiche pour “next” et “previous”; Cependant, je n’ai cliqué que sur l’un des boutons!

S’il vous plaît laissez-moi savoir si vous avez besoin de plus d’éclaircissements.

Merci

Vous confondez la bind et on méthodes. Ils ont l’air similaire, mais bind a moins de fonctionnalités: il ne prend pas en charge la délégation d’événements. Le deuxième argument n’est pas le sélecteur pour les événements delegates, mais un argument de data .

Cela fonctionnera:

 $("#gallery").on('click', '#nxtbtn', function() {

Je pense que vous vouliez utiliser .on() place:

 $("#gallery").on('click', '#nxtbtn', function() { alert('next'); }); $("#gallery").on('click', '#prebtn', function() { alert('previous'); });

La fonction bind() sera liée à l’élément dans le sélecteur initial, dans ce cas #gallery . Donc, vous liez les deux fonctions à cet événement. Techniquement, c’est aussi ce que fait .on() , mais il utilise le deuxième argument comme filtre pour l’élément qui a déclenché l’événement. Je ne pense pas que .bind() fasse cela, je pense que le deuxième argument est juste des données que vos fonctions de gestionnaire d’événements ignorent.

vous devriez utiliser on au lieu d’utiliser bind pour le faire fonctionner avec des éléments créés dynamicment. Considérant que e.preventDefault () empêchera le déclenchement d’action par défaut de chaque événement.

 $("#gallery").on('click', '#nxtbtn', function(e) { e.preventDefault(); alert('next'); });

 $("#gallery").on('click', '#prebtn', function(e) { e.preventDefault(); alert('previous'); });