Comment migrer correctement « live() » de jQuery vers « on() » pour les éléments ajoutés dynamiquement ?

Transition de live() à on() dans jQuery : débogage de la liaison d'événement

La méthode live() de jQuery a été abandonnée dans la version 1.7, nécessitant un passage à on( ). Bien que le remplacement de live() par on() devrait idéalement donner des résultats similaires, la documentation on() souligne que les gestionnaires d'événements ne se lient qu'aux éléments actuellement sélectionnés présents sur la page au moment de la liaison.

Original Implémentation (live()) :

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

Remplacement (on()):

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

La différence avec live() vient du fait que on() ne se lie qu'aux éléments actuellement existants, contrairement au mécanisme de délégation de live() qui attachait l'événement gestionnaires d'éléments ajoutés dynamiquement au DOM.

Utilisation correcte de on() pour les éléments dynamiques :

Pour maintenir la gestion des événements pour éléments ajoutés dynamiquement avec on(), le gestionnaire d'événements doit être lié à un élément parent qui existe sur la page au moment de la liaison. Ceci peut être réalisé en utilisant :

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

Alternativement, la délégation d'événements peut être appliquée plus près dans la hiérarchie des éléments pour améliorer la spécificité.

Note de la documentation jQuery :

La documentation live() note explicitement que la réécriture de live() en termes de ses successeurs implique de lier les gestionnaires d'événements aux gestionnaires d'événements existants. éléments :

$(document).on(events, selector, data, handler);  // jQuery 1.7+

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!