web-dev-qa-db-fra.com

Le gestionnaire d'événement ne fonctionne pas sur le contenu dynamique

J'ai un tag A dans lequel, lorsqu'on clique dessus, il ajoute un autre tag B pour effectuer une action B au clic. Ainsi, lorsque je clique sur la balise B, l'action B est effectuée. Cependant, la méthode .on ne semble pas fonctionner sur la balise B créée dynamiquement.

Mon html et jquery pour le tag A est comme ci-dessous:

<a id="address" class="add_address btn btn-inverse btn-medium pull-right Push-top">Add Shipping address</a>

$('.add_address').click(function(){
    //Add another <a>
    $(document).append('<a id="address"  class="pull-right update btn btn-inverse btn-medium Push-top">Update</a>');
})

Lorsque la balise B est cliquée, une action B est effectuée. Mon jquery est comme ci-dessous:

$('.update').on('click',function(){
  //action B
});

J'ai du contenu non dynamique qui a aussi la classe ".update". Dans la méthode .on() ci-dessus, cela fonctionne bien pour le contenu non dynamique, mais pas pour le contenu dynamique.

Comment puis-je le faire fonctionner pour le contenu dynamique?

jquerydynamic-contentstatic-content
243
edelweiss

Vous devez ajouter le paramètre selector, sinon l'événement est directement lié au lieu de délégué, ce qui ne fonctionne que si l'élément existe déjà (il ne fonctionne donc pas pour le contenu chargé dynamiquement).

Voir http://api.jquery.com/on/#direct-and-delegated-events

Changez votre code en

$(document.body).on('click', '.update' ,function(){

L'ensemble jQuery reçoit l'événement, puis le délègue aux éléments correspondant au sélecteur donné en argument. Cela signifie que, contrairement à l'utilisation de live, les éléments de l'ensemble jQuery doivent exister lors de l'exécution du code.

Comme cette réponse reçoit beaucoup d'attention, voici deux conseils supplémentaires:

1) Lorsque cela est possible, essayez de lier l'écouteur d'événements à l'élément le plus précis possible, afin d'éviter une gestion d'événements inutile.

Autrement dit, si vous ajoutez un élément de la classe b à un élément existant de id a, n'utilisez pas

$(document.body).on('click', '#a .b', function(){

mais utiliser

$('#a').on('click', '.b', function(){

2) Faites attention lorsque vous ajoutez un élément avec un identifiant afin de vous assurer de ne pas l'ajouter deux fois. Non seulement il est "illégal" en HTML d'avoir deux éléments avec le même identifiant, mais cela casse beaucoup de choses. Par exemple, un sélecteur "#c" ne récupèrera qu'un élément avec cet identifiant.

547
Denys Séguret

Il vous manque le sélecteur dans la fonction .on:

.on(eventType, selector, function)

Ce sélecteur est très important!

http://api.jquery.com/on/

Si un nouveau code HTML est injecté dans la page, sélectionnez les éléments et associez des gestionnaires d’événements une fois le nouveau code HTML inséré dans la page. Ou, utilisez des événements délégués pour attacher un gestionnaire d'événements

Voir jQuery 1.9 .live () n'est pas une fonction pour plus de détails.

26
Samuel Liew