jQuery.fn.on
a une bonne explication dans la documentation 一個(gè)>.
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.
(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. ??
à 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
)。每次在此元素或后代元素之一上觸發(fā)事件時(shí),都會(huì)觸發(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.
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
live() Signature?:
$(selector).live( eventName, function(){} );
on()
...peut être remplacé par ce qui suit
$(document).on( eventName, selector, function(){} );
dosomething
的元素,您可以將該事件綁定到已經(jīng)存在的父級(jí)(這是該事件的核心)這里的問題是,你需要一些存在的東西來綁定,而不是綁定到動(dòng)態(tài)內(nèi)容),這可以是(也是最簡(jiǎn)單的選項(xiàng))是document
。但請(qǐng)記住 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) estdocument. 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>