Méthode de .on() de jQuery ne fonctionne ne pas sur un contenu dynamique

Question

J'ai un tag Un en qui lorsque l'on clique dessus, il ajoute un autre tag B pour effectuer une action de B sur cliquez sur. Alors, quand je clique sur la balise B, de l'action B est réalisé. Cependant, l' .on méthode ne semble pas fonctionner sur le créé dynamiquement balise B.

Mon code 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>');
})

Lors de la balise B est cliqué, une action B est réalisé. Mon jquery est comme ci-dessous:

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

J'ai quelques non contenu dynamique qui a de la classe ".mise à jour". Dans l' .on() méthode ci-dessus fonctionne très bien pour les non contenu dynamique, mais pas pour le contenu dynamique.

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

Answer 1

Vous devez ajouter le sélecteur de paramètre, sinon l'événement est directement liée à la place de délégués, qui ne fonctionne que si l'élément existe déjà (donc il ne fonctionne pas pour charger dynamiquement du contenu).

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

Modifiez votre code pour

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

Le jQuery ensemble reçoit l'événement puis les délègue à des éléments correspondant au sélecteur donné en argument. Cela signifie que, contrairement à lorsque vous utilisez live, le jQuery ensemble des éléments doit exister lorsque vous exécutez le code.

Comme cela répond reçoit beaucoup d'attention, ici, sont deux supplémentaires conseille :

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

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

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

mais l'utilisation de

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

2) attention, lorsque vous ajoutez un élément avec un id, pour vous assurer que vous n'êtes pas à l'ajouter à deux reprises. Non seulement il est "illégal" dans le HTML afin de disposer de deux éléments avec le même id mais il casse beaucoup de choses. Par exemple, un sélecteur "#c" permettrait de récupérer un seul élément avec cet id.

Answer 2

Il vous manque le sélecteur en .on fonction de:

.on(eventType, selector, function)

Ce sélecteur est très important!

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

Si le HTML est injecté dans la page, sélectionnez les éléments et joindre les gestionnaires d'événements après le nouveau code HTML est placé dans la page. Ou, utilisation délégué événements à associer un gestionnaire d'événement

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

Answer 3

J’ai fait quelque chose comme ça

1. De la fonction init() appel en HTML sur le linge
2. Créer un init () la fonction javascript avec jquery code dedans.
3. fonction Button_Clicked() est appelée pour créer du contenu dynamique qui stagiaire appelle la fonction init().