Comment appliquer des événements à des nœuds DOM chargés dynamiquement avec JQuery?

Question

J'utilise AHAH pour charger un morceau de HTML après que le document est prêt. Il y a un bouton dans ce morceau de HTML auquel j'aimerais appliquer un événement .click. J'ai du mal à appliquer cet événement après le chargement du code HTML. Le rappel est très générique et est utilisé par d'autres parties de la page, donc je préférerais ne pas le remplir de code spécifique. Des idées?

Answer 1

Comme d'autres pointent, vous voulez envisager d'utiliser $.live(), qui traitera des événements pour tous les éléments DOM pré-existants, ainsi que tout ajouté plus tard sur la route. Par exemple, supposons que le bloc de HTML que vous chargez dans a un ensemble de liens contenant le nom de classe « foo », qui devraient tous répondre de manière spécifique lorsque vous cliquez dessus:

$(".foo").click(function(){ 
    // I don't do anything to dynamicall-added elements 
}); 

Cet exemple ne s'appliquera éléments préexistants contenant le nom de classe "foo." Pour gérer les éléments actuels et futurs, nous devons faire ce qui suit:

$(".foo").live("click", function(){ 
    // I handle both present, and future elements 
}); 

Maintenant, quoi que ce soit ajouté à tout moment sera pris en charge par cette si elle contient le nom de classe « foo ». Cela fonctionne très bien pour des situations comme la vôtre où de gros blocs de HTML seront insérés dans le DOM plus tard dans le cycle de vie de la page.

Answer 2

Regardez en utilisant la méthode .live(): http://api.jquery.com/live/

Answer 3

C'est ce que la méthode live a été construit pour.

Votre meilleur choix est de l'utiliser, ou d'ajouter un event listener à votre élément contenant (ou même à body). Live est idéal pour les événements qui bulle. Les écouteurs d'événements sont la solution à ceux qui n'en ont pas.

Answer 4

Je pense que vous devrez utiliser la méthode live à la place pour réagir au contenu chargé dynamiquement.

live Video Demonstration

Answer 5

Comme tout le monde l'a dit, la méthode .live() a été spécialement conçue à cet effet et vous parlez de l'événement click que .live() gère alors allez-y et utilisez-le, ce sera le plus facile/rapide manière d'accomplir ceci. Juste une suggestion cependant, vous dites que vous avez une fonction de rappel assez générique et pour une situation très similaire je ne pouvais pas utiliser .live() (j'ai dû faire un traitement assez complexe après) donc j'ai ajouté de la flexibilité en ajoutant un paramètre à l'appel initial afin que le code appelant puisse spécifier un rappel personnalisé. quelque chose le long de ces lignes:

callToAGenericService({url: '...', target: someId, callback: function myCustomCallBack (xhr) { 
    console.log('Custom callback'); 
    console.dir(xhr); 
}}); 

et le service générique rappel générique a été modifié pour être quelque chose le long de ces lignes:

function genericServiceCallback(options,xhr) { 
    //Do the 'generic processing' of the request 

    // if calling code specified a custom callback, execute it 
    if (options.callback) { 
     options.callback(options,xhr); 
    } 
} 

Il était évidemment beaucoup plus sophistiqué (erreur et portée principalement la manipulation), mais donne une idée.