Ajout de récepteurs d'événements aux éléments ajoutés dynamiquement à l'aide de jQuery

Question

Donc, pour l'instant, je comprends que pour attacher un écouteur d'événements à un dynamiquement ajouté, vous devez redéfinir l'écouteur après avoir ajouté l'élément.

Existe-t-il un moyen de contourner ce problème, afin de ne pas avoir à exécuter un bloc de code supplémentaire ?

Answer 1

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

par exemple

$('#staticDiv').on('click', 'yourSelector', function() {
  //do something
});

Answer 2

$(document).on('click', 'selector', handler);

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

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

Answer 3

Vous générez ces éléments de manière dynamique, de sorte que tout listener appliqué au chargement de la page ne sera pas disponible. J'ai modifié votre bidule avec la solution correcte. En fait, jQuery retient l'événement pour le lier ultérieurement en l'attachant à l'élément parent et en le propageant vers le bas à l'élément correct créé dynamiquement.

$('#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/

Answer 4

Lorsque vous ajoutez un nouvel élément avec des appels de plugins jquery, vous pouvez faire comme suit :

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