web-dev-qa-db-fra.com

Jquery ajoutant des écouteurs d'événements à des éléments ajoutés dynamiquement

Donc pour le moment, je comprends que pour attacher un écouteur d'événement à un élément ajouté dynamiquement, vous devez redéfinir l'écouteur après l'ajout de l'élément. Existe-t-il un moyen de contourner ce problème pour ne pas avoir à exécuter un bloc de code supplémentaire?

jqueryevents
87
Wiz

En utilisant .on() , vous pouvez définir votre fonction une fois, et celle-ci sera exécutée pour tous les éléments ajoutés dynamiquement.

par exemple

$('#staticDiv').on('click', 'yourSelector', function() {
  //do something
});
168
Jack
$(document).on('click', 'selector', handler);

Où click est un nom d'événement et handler est un gestionnaire d'événements, comme référence à une fonction ou à une fonction anonyme function() {}

PS: si vous connaissez le nœud auquel vous ajoutez des éléments dynamiques, vous pouvez le spécifier à la place de document.

43
zerkms

Vous générez dynamiquement ces éléments afin que tout écouteur appliqué au chargement de page ne soit disponible. J'ai édité votre violon avec la solution correcte. En gros, jQuery conserve l'événement pour une liaison ultérieure en l'attachant à l'élément parent et en le propageant vers le bas à l'élément créé de manière dynamique.

$('#musics').on('change', '#want',function(e) {
    $(this).closest('.from-group').val(($('#want').is(':checked')) ? "yes" : "no");
    var ans=$(this).val();
    console.log(($('#want').is(':checked')));
});

http://jsfiddle.net/swoogie/1rkhn7ek/39/

2
Luc Kim-Hall

Lorsque vous ajoutez un nouvel élément aux appels du plug-in jquery, vous pouvez procéder comme suit:

$('<div>...</div>').hoverCard(function(){...}).appendTo(...)
1
haotang