JQuery - Exécution du code pour chaque nouvel objet DOM instancié

Question

Je me demande si cela est possible dans JQuery.

J'ai un code Javascript qui crée des objets DOM à la volée, en réponse aux actions de l'utilisateur. Certains de ces objets DOM sont dans une structure spécifique - le conteneur a toujours la même & "Classe &"; attribut.

Ce que j'aimerais faire, c’est chaque fois une nouvelle instance d’un objet DOM avec la classe & "X &"; est créé, je veux que le même morceau de code Javascript soit exécuté. Ce code ajoutera un & Quot; onclick & Quot; événement à cet objet DOM.

Malheureusement, je ne peux pas simplement mettre le code qui assigne onclick dans document.Ready (), car les objets auxquels il est lié sont en train d'être créés à la volée, bien après l'exécution de document.Ready ().

JQuery vous permet-il de configurer des liaisons persistantes qui seront automatiquement liées à un type d'objet DOM, même s'il est généré à la volée?

Answer 1

Auparavant, cela était couvert par "live", "délégué" ou parfois "bind". Celles-ci sont désormais remplacées par "on", mais certaines mises en garde sont décrites ci-après: persistance de liaison d'événement Javascript

Answer 2

Je pense avoir trouvé la réponse à ma propre question, dans la documentation de JQuery, assez étonnamment.

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

live( type, fn )

Ajouté dans jQuery 1.3: lie un gestionnaire à un événement (comme un clic) pour tous les éléments correspondants actuels et futurs. Peut également lier des événements personnalisés.

Answer 3

Avez-vous consulté le plug-in jQuery appelé LiveQuery ?

À partir de la page de documentation LiveQuery:

  

Par exemple, vous pouvez utiliser le   code suivant pour lier un événement click   à tous les tags A, même tous les tags A vous   pourrait ajouter via AJAX.

$('a') 
>     .livequery('click', function(event) { 
>         alert('clicked'); 
>         return false; 
>     });

  

Une fois que vous avez ajouté de nouveaux tags A à votre   document, Live Query lie le   cliquez sur l'événement et il n'y a rien d'autre   qui doit être appelé ou fait.

Answer 4

Pas possible dans le noyau jQuery (comme vous l'avez probablement compris avec d'autres réponses faisant référence à certains plugins) ... cela peut être une tâche très simple si vous n'avez pas nécessairement besoin de toutes les fonctionnalités de quelque chose comme livequery

Pour les navigateurs qui les prennent en charge, utilisez l'événement DOM niveau 2 - 'DOMNodeInserted':

http: // www. w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-mutationevents