Pourquoi mon jQuery `on('change')` ne fonctionne-t-il pas sur les listes déroulantes ajoutées dynamiquement ?

Transition de live() de jQuery vers on() : qu'est-ce qui ne va pas ?

Dans jQuery, la méthode live() a été remplacée par on() pour la gestion des événements. Cependant, malgré la migration vers jQuery 1.7 et l'utilisation de on('change') pour détecter les modifications dans les listes déroulantes ajoutées dynamiquement, le gestionnaire d'événements est resté inactif.

La solution

La La principale différence réside dans la manière dont on() gère la délégation d'événements. Contrairement à live(), qui attache les gestionnaires d'événements aux éléments créés dynamiquement, on() lie les gestionnaires uniquement aux éléments qui existent au moment de son invocation.

Pour obtenir la même fonctionnalité que live(), on( ) la syntaxe doit être modifiée comme suit :

$(document.body).on('change', 'select[name^="income_type_"]', function() {
    alert($(this).val());
});

Cela lie le gestionnaire d'événements au corps du document, ce qui garantit que les gestionnaires sont attachés même pour les éléments ajoutés dynamiquement.

Alternativement, pour une gestion des événements plus ciblée, envisagez d'attacher des gestionnaires à l'élément ancêtre le plus proche possible.

La documentation jQuery indique explicitement que on() se comporte différemment de ses prédécesseurs, en soulignant cet événement les gestionnaires sont liés uniquement aux éléments existants. Cela explique pourquoi l'implémentation initiale avec on('change') ne fonctionnait pas.

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!