Gestion des événements jQuery : .live() vs .on() pour les éléments chargés dynamiquement ?

Gestion des événements avec HTML dynamique : jQuery .live() vs .on()

Lorsque vous travaillez avec du HTML chargé dynamiquement, ajout de gestionnaires d'événements aux éléments nouvellement créés peut être un défi. Cette question explore les différences entre les méthodes .live() et .on() de jQuery pour attacher des événements de clic à des éléments chargés dynamiquement.

Dans jQuery v1.7.1, .live() est obsolète. Au lieu de cela, .on() est recommandé pour la gestion des événements avec du contenu créé dynamiquement. Cependant, l'interrogateur a rencontré une situation dans laquelle .on() n'a pas réussi à enregistrer les événements de clic pour les éléments chargés dynamiquement avec $('#parent').load().

La méthode correcte pour ce scénario est la délégation d'événements, réalisé en utilisant .on(). La délégation d'événements implique d'attacher le gestionnaire d'événements à un élément parent qui existe avant le chargement du contenu dynamique. Le gestionnaire d'événements est ensuite configuré pour écouter les événements provenant des éléments créés dynamiquement.

Par exemple, pour attacher un gestionnaire de clics aux éléments #child chargés dynamiquement dans #parent :

$('#parent').on("click", "#child", function() {});

Cette approche permet au gestionnaire d'événements de capturer les événements de clic sur les éléments #child, même si les éléments n'existaient pas lorsque le gestionnaire d'événements a été attaché. En effet, l'événement de clic remonte jusqu'à l'élément #parent, dont le gestionnaire d'événements est défini pour les éléments #child.

La délégation d'événements résout le problème de l'ajout de gestionnaires de clics aux éléments créés dynamiquement et constitue l'approche recommandée lorsque travailler avec du HTML chargé 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!