JQuery .click() ne fonctionne pas sur HTML ajouté à DOM en utilisant .after()?

Question

J'ai ajouté du HTML à ma page en utilisant la méthode .after() en utilisant du HTML qui est récupéré à partir d'un appel 'Ajax' .GET().

J'ai un bouton dans mon HTML récupéré et un événement qui est configuré pour être déclenché lorsque ce bouton est cliqué. Cependant, la méthode qui gère l'événement .click n'est jamais déclenchée. Quand je mets le même bouton dans mon html "normal" cependant la méthode est déclenchée et le .click() fonctionne bien.

Cela se produit dans Mozilla et Firefox. Que puis-je faire pour que le bouton récupéré soit reconnu par jQuery? J'ai tout mon code dans le $ (document) .ready (function() {... cela aura une incidence?

Answer 1

Utilisez le .live('click', fn) au lieu de .click (fn) pour câbler votre gestionnaire d'événements Un fichier .click (fn) normal dans $ (document) .ready() affectera uniquement les éléments du DOM pendant le chargement initial de la page.

Answer 2

On dirait que vous devez vérifier la fonction .live().

http://docs.jquery.com/Events/live

Answer 3

Essayez $("#btn").live("click", function(){...}) au lieu de $("#btn").click(function(){...})

Answer 4

Si vous avez <script> étiquettes contenues dans vos données que vous récupérez avec .get(), elles ne seront pas exécutées lorsqu'elles seront ajoutées à la page avec .after().

Vous pouvez joindre le code après le fait:

$.get('/url', {key:value}, function(data){ 
    $("#wrapper").after(data); 
    $("#new_id a").click(function(){ ... }); 
}, 'html'); 

Vous pouvez également analyser les données de retour pour <script> blocs et les eval() après avoir utilisé la fonction .after(). Soyez très prudent, vous faites confiance aux blocs <script> avant de les aveugler eval eux.