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.
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
). Remarque?: Les événements de délégué ne fonctionnent pas avec SVG??. ??
à 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
)。每次在此元素或后代元素之一上觸發(fā)事件時,都會觸發(fā)此 jQuery 處理程序。然后,處理程序檢查觸發(fā)事件的元素是否與您的選擇器匹配(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
Signature?:
$(selector).live( eventName, function(){} );
on()
...peut être remplacé par la
$(document).on( eventName, selector, function(){} );
dosomething
的元素,您可以將事件綁定到已經(jīng)存在的父級(這是問題的核心,您需要一些東西存在綁定到,不綁定到動態(tài)內(nèi)容),這可以(也是最簡單的選項)是 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 à ??