jQuery.fn.ona une bonne explication dans la documentation 一个>.

En bref :

Donc, dans l'exemple ci-dessous,#dataTable tbody trdoit 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ésest 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 danstbody, 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 esttbody，并且事件只需要向上冒泡一层（从单击的tr到tbody, et l'événement n'a besoin que de remonter d'un niveau (dutrcliqué à

).

Remarque :Les événements de délégué ne fonctionnent pas avecSVG.

À partir de jQuery 1.7, vous devez utiliserjQuery.fn.onavec 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'utiliserlive():

$(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。但请记住 documentPar 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 à