Liaison d'événements d'éléments dynamiques : Comment lier des événements à des éléments créés dynamiquement ?

Question

J'ai du code dans lequel je parcoure toutes les cases de sélection de la page et apporte quelques ajustements .hover 事件绑定到它们，以在 mouse on/off à leur largeur.

Cela se produit une fois que la page est prête et fonctionne correctement.

Le problème que j'ai est que les zones de sélection ajoutées via Ajax ou DOM après la boucle initiale ne sont pas liées aux événements.

J'ai trouvé ce plugin (jQuery Live Query Plugin), mais avant d'utiliser le plugin pour ajouter 5k supplémentaires à ma page, je voulais voir si quelqu'un savait comment le faire, soit directement en utilisant jQuery, soit via autre chose.

Answer 1

jQuery.fn.on a une bonne explication dans la documentation.

En bref :

Donc, dans l'exemple ci-dessous, #dataTable tbody tr doit exister avant que le code ne soit généré.

$("#dataTable tbody tr").on("click", function(event){
    console.log($(this).text());
});

Si du nouveau HTML est injecté dans la page, il est préférable d'attacher des gestionnaires d'événements à l'aide d'événements délégués, comme décrit ci-dessous.

L'avantage des événements délégués est qu'ils peuvent gérer les événements d'éléments descendants qui sont ensuite ajoutés au document. Par exemple, si la table existe mais que des lignes sont ajoutées dynamiquement à l'aide de code, ce qui suit la gérera :

$("#dataTable tbody").on("click", "tr", function(event){
    console.log($(this).text());
});

En plus de pouvoir gérer des événements sur des éléments descendants qui n'ont pas encore été créés, un autre avantage des événements délégués est qu'ils peuvent réduire la surcharge lorsque de nombreux éléments doivent être surveillés. Sur une table de données comportant 1 000 lignes dans tbody , le premier exemple de code attache des gestionnaires à 1 000 éléments.

La méthode d'événement délégué (deuxième exemple de code) n'attache le gestionnaire d'événement qu'à un seul élément tbody，并且该事件只需要向上冒泡一级（从单击的 tbody 到 tbody, et l'événement n'a besoin que de remonter d'un niveau (du

cliqué au

). Remarque : Les événements de délégué ne fonctionnent pas avec SVG🎜. 🎜

Answer 2

À partir de jQuery 1.7, vous devez utiliser jQuery.fn.on et renseigner les paramètres du sélecteur :

$(staticAncestors).on(eventName, dynamicChild, function() {});

Instructions :

C'est ce qu'on appelle la délégation d'événement et cela fonctionne comme ça. Cet événement est attaché au parent statique (staticAncestors)。每次在此元素或后代元素之一上触发事件时，都会触发此 jQuery 处理程序。然后，处理程序检查触发事件的元素是否与您的选择器匹配（dynamicChild) de l'élément qui doit être géré. Lorsqu'il y a une correspondance, votre fonction de gestionnaire personnalisé est exécutée.

---

D'ici là, la méthode recommandée est d'utiliser live():

$(selector).live( eventName, function(){} );

Cependant, live() 在 1.7 中已被弃用，取而代之的是 on()，并在 1.9 中完全删除。 live() a été obsolète dans la version 1.7, remplacé par

et entièrement supprimé dans la version 1.9.

Signature :

$(selector).live( eventName, function(){} );

on()...peut être remplacé par la

---

signature suivante :

$(document).on( eventName, selector, function(){} );

dosomething 的元素，您可以将事件绑定到已经存在的父级（这是问题的核心，您需要一些东西存在绑定到，不绑定到动态内容），这可以（也是最简单的选项）是 document。但请记住 document Par exemple, si votre page crée dynamiquement un élément avec un nom de classe (non lié au contenu dynamique), cela peut (et c'est l'option la plus simple) être document. Mais gardez à l'esprit que le document peut ne pas être le choix le plus efficace .

$(document).on('mouseover mouseout', '.dosomething', function(){
    // what you want to happen when mouseover and mouseout 
    // occurs on elements that match '.dosomething'
});

Tout parent existant au moment où l'événement est lié fera l'affaire. Par exemple

$('.buttons').on('click', 'button', function(){
    // do something here
});

S'applique à 🎜