JQuery - le code faisant exécuter 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 des utilisateurs. Certains de ces objets DOM sont dans une structure spécifique - le conteneur a toujours le même attribut "class".

Ce que je voudrais faire est, à chaque fois une nouvelle instance d'un objet DOM avec classe « X » est créé, je veux le même morceau de code JavaScript pour exécuter. Ce code ajoutera un événement "onclick" à cet objet DOM.

Malheureusement, je ne peux pas simplement mettre le code qui affecte l'onclick dans document.Ready(), puisque les objets auxquels il se lie sont créés à la volée, longtemps après que document.Ready() a été exécuté.

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

Answer 1

Cette habitude d'être couvert par « en direct », « délégué », ou parfois « se lier ». Ceux-ci sont maintenant remplacés par « sur » mais il y a des mises en garde comme évoquons ici: Javascript event binding persistence

Answer 2

Avez-vous regardé un plugin jQuery appelé LiveQuery?

A partir de la page de documentation livequery:

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

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

Une fois que vous ajoutez de nouveaux A balises à votre document , Query Live lie l'événement click et il n'y a rien d'autre qui doit être appelé ou fait.

Answer 3

Je pense que j'ai trouvé la réponse à ma propre question, juste dans la documentation de JQuery, assez étonnamment.

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

live(type, fn) 

Ajouté dans jQuery 1.3: Associe un gestionnaire à un événement (comme un clic) pour tout le courant - élément adapté - et futur. Peut également lier des événements personnalisés.

Answer 4

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

pour les navigateurs qui les soutiennent - utilisent l'événement DOM niveau 2 - « DOMNodeInserted »:

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