Réponse à l'événement click de l'élément ajouté au document après chargement de la page

Question

J'écris une page qui utilise beaucoup d'édition et de mise à jour in situ à l'aide de jQuery for AJAX.

Je suis venu accross un problème qui peut être mieux résumée par le flux de travail décrit ci-dessous:

1. En cliquant sur « element1 » sur la page de résultats dans un
2. données jQuery AJAX POST
est reçu au format JSON
3. les données reçues au format JSON
4. les données reçues sont utilisées pour mettre à jour un « résultats » élément existant dans la page
5. les données reçues est un formulaire HTML réel
6. Je veux jQuery être responsable de la forme lorsque POSTer le bouton de formulaire est cliqué

Le problème se pose au point 6 ci-dessus. J'ai le code dans ma page principale qui ressemble à ceci:

$(document).ready(function(){ 
    $('img#inserted_form_btn').click(function(){ 
    $.ajax({'type': 'POST', 'url': 'www.example.com', 'success': function($data){ 
     $(data.id).html($data.frm); 
    }), 'dataType': 'json'} 
    }); 
}); 

Cependant, l'événement n'est pas déclenché. Je pense que cela est dû au fait que lorsque le document est chargé, l'élément img # inserted_form_btn n'existe pas sur la page (il est inséré dans le DOM suite à un clic sur la page (non affiché dans le code ci-dessus). garder la question courte)

Ma question est donc: comment puis-je obtenir jQuery pour être en mesure de répondre aux événements ayant lieu dans des éléments qui ont été ajoutés au DOM une fois la page chargée

Answer 1

Utilisez un gestionnaire en direct?. ^{dépréciée depuis un certain temps, vérifier la deuxième partie de ma réponse pour de meilleures solutions!}

$('img#inserted_form_btn').live('click', function() { 
    // Your click() code 
}); 

---

En supposant que l'image est un enfant d'un élément qui existe déjà lors de la liaison de l'événement, vous pouvez utiliser un délégué à la place:

$('#parent-element').on('click', '#inserted_form_btn', function() { 
    // Your click() code 
}); 

Si vous n'avez pas jQuery 1.7+:

$('#parent-element').delegate('#inserted_form_btn', 'click', function() { 
    // Your click() code 
}); 

Dans tous les cas, vous pouvez utiliser un délégué et utiliser $(document) au lieu de $('#parent-element') s'il n'y a pas d'élément parent approprié.

Answer 2

Live events est ce que vous cherchez.

Answer 3

Vous devez soit attribuer le clic même comme un événement de processus post sur l'appel AJAX initial, à savoir

$.ajax({ url: "test.html", context: document.body, success: function(){ 
    $('img#inserted_form_btn').click(function(){ 
     $.ajax({'type: 'POST', 'url': 'www.example.com', function($data){ 
      $(data.id).html($data.frm); 
     }), 'dataType': 'json'} 
    }); 
}}); 

ou utiliser la méthode .live pour assurer l'événement est réaffecté lorsque l'élément dom est créé.

Answer 4

vous pouvez utiliser en direct() qui se lie une fonction à tous les éléments correspondant à votre sélection, même ceux créés dans l'avenir: Regardez http://api.jquery.com/live/

Answer 5

au 1.4.2 .delegate()

La documentation est ici: Delegate

Answer 6

en direct est dépréciée, utilisez .on() comme par exemple:

$('#table tbody').on('click', 'tr', function(e){ 
    var row = $(this).find('td:first').text(); 
    alert('You clicked ' + row); 
});