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

Question

J'ai un tag A dans lequel, lorsqu'on clique dessus, il ajoute une autre balise B pour effectuer une action B sur click. Donc quand je clique sur la balise B, l'action B est exécutée. Cependant, la méthode .on ne semble pas fonctionner sur l'étiquette dynamique créée B.

Mon html et jquery pour la balise 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 balise B est cliqué, une action B est effectué. Ma jquery est comme ci-dessous:

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

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

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

Answer 1

Vous devez ajouter le paramètre de sélection, 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

Changer votre code

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

L'ensemble jQuery reçoit l'événement puis délègue à des éléments correspondant au sélecteur donné comme argument. Cela signifie que contrairement à l'utilisation de live, les éléments set jQuery doivent exister lorsque vous exécutez le code.

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

1) Quand il est possible, essayez de lier l'écouteur d'événement à l'élément le plus précis, afin d'éviter la gestion des événements inutiles.

C'est, si vous ajoutez un élément de classe b à un élément existant de id a, alors ne pas utiliser

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

mais utilisez

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

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

Answer 2

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 le nouveau HTML est injecté dans la page, sélectionnez les éléments et attach gestionnaires d'événements est placé après le nouveau code HTML dans la page.Ou, utilisation des événements délégués pour fixer un gestionnaire d'événements

Voir jQuery 1.9 .live() is not a function pour plus de détails.