Comment attacher des gestionnaires d'événements à des éléments ajoutés dynamiquement avec jQuery ?

Comment lier des événements à des éléments dynamiques à l'aide de jQuery

Supposons que vous disposiez d'un code jQuery existant qui attache des gestionnaires d'événements aux éléments avec la classe .myclass . Cependant, dans les scénarios où ces éléments sont ajoutés dynamiquement à la page via AJAX ou DHTML, les éléments nouvellement créés ne seront pas associés au gestionnaire de clics.

Solution du problème

Pour gérer ce problème, jQuery propose plusieurs approches :

1. Méthode .on() (jQuery 1.7) :

Remplacez la méthode .live() par .on() et spécifiez un sélecteur qui combine l'élément parent avec .myclass comme argument.

$('body').on('click', 'a.myclass', function() {
    // do something
});

Cela attachera le gestionnaire de clics à tous les fichiers balises avec la classe .myclass, quel que soit le moment où elles sont ajoutées à la page.

2. Méthode .delegate() (jQuery 1.6 - 1.8) :

La méthode .delegate() agit de la même manière que .on() mais nécessite que l'élément parent soit spécifié entre parenthèses :

$('body').delegate('a.myclass', 'click', function() {
    // do something
});

.on() et .delegate() permettent la gestion des événements sur les éléments ajoutés dynamiquement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!