Liaison d'événement sur des éléments créés dynamiquement ?

Question

J'ai du code dans lequel je parcoure toutes les zones de sélection de la page et leur lie l'événement .hover pour redimensionner leur largeur sur ;/code>.

Cela se produit lorsque la page est prête et fonctionne correctement.

Le problème que je rencontre est que les zones de sélection ajoutées via Ajax ou DOM après la boucle initiale ne sont pas liées à des é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 un autre choix.

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, qui est tbody，并且事件只需要向上冒泡一层（从单击的 tr 到 tbody, et l'événement n'a besoin que de remonter d'un niveau (du tr cliqué à

).

Remarque : Les événements de délégué ne fonctionnent pas avec SVG< /p>. 🎜

Answer 2

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

$(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é à la correspondance 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.

---

Avant cela, la méthode recommandée est d'utiliser live()< /代码>:

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

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

on() et entièrement supprimé dans la version 1.9.

live() Signature :

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

on()...peut être remplacé par ce qui suit

on()

---

Signature :

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

dosomething 的元素，您可以将该事件绑定到已经存在的父级（这是该事件的核心）这里的问题是，你需要一些存在的东西来绑定，而不是绑定到动态内容），这可以是（也是最简单的选项）是document。但请记住 document Par exemple, si votre page crée dynamiquement des éléments avec le nom de classe

dosomething, vous pouvez lier cet événement à

un parent déjà existant

(qui est le cœur de l'événement). Le problème ici est que vous avez besoin de quelque chose d'existant à lier, plutôt que de lier à du contenu dynamique), cela peut être (et l'option la plus simple) est

document. Mais gardez à l'esprit que le

document n'est peut-être pas le plus option 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 à 🎜

<div class="buttons">
    <!-- <button>s that are generated dynamically and added here -->
</div>