Migration jQuery : pourquoi « on() » ne fonctionne-t-il pas avec les listes déroulantes ajoutées dynamiquement ?

jQuery : mise à niveau de live() vers on() pour les listes déroulantes ajoutées dynamiquement

jQuery 1.7 a introduit la méthode on() en remplacement pour vivre(). Bien que la syntaxe et les fonctionnalités prévues de on() semblent simples, les utilisateurs peuvent rencontrer des problèmes lorsqu'ils tentent de migrer de live() vers on() pour des éléments ajoutés dynamiquement.

Problème :

Lorsque vous utilisez on() pour écouter les événements change() dans les menus déroulants ajoutés dynamiquement, le gestionnaire d'événements ne parvient pas à fire.

Cause :

Contrairement à live(), qui attachait des gestionnaires d'événements à tous les éléments correspondants dans le document, on() ne lie les gestionnaires qu'aux éléments existants. En effet, les gestionnaires d'événements on() sont limités aux éléments actuellement sélectionnés, ce qui signifie que les éléments nouvellement ajoutés ne pourront pas déclencher l'événement à moins que le gestionnaire ne soit lié à un élément de niveau supérieur.

Solution :

Pour reproduire le comportement de live(), liez le gestionnaire d'événements à un élément de niveau supérieur qui encapsule les listes déroulantes ajoutées dynamiquement. Cela garantit que tous les éléments nouvellement ajoutés dans cette portée pourront déclencher le gestionnaire d'événements.

Code :

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

Alternativement, il est préférable de lier le gestionnaire d'événements le plus près possible des éléments cibles. Cependant, cela n'est pas toujours réalisable dans tous les scénarios.

Remarque :

Il est important de savoir que la documentation on() indique explicitement que les gestionnaires d'événements sont uniquement lié aux éléments actuellement sélectionnés et doit exister sur la page au moment de la liaison.

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!