Comment puis-je gérer les événements d'éléments générés dynamiquement en JavaScript ?-js tutoriel-php.cn

Comment puis-je gérer les événements d'éléments générés dynamiquement en JavaScript ?

Mary-Kate Olsen

Libérer： 2024-12-12 20:58:10

original

652 Les gens l'ont consulté

How Can I Handle Events from Dynamically Generated Elements in JavaScript?

Gestion des événements à partir d'éléments générés dynamiquement

Dans le domaine du développement Web, la gestion des événements à partir d'éléments générés dynamiquement peut présenter un défi. Cet article aborde le problème de la capture des événements déclenchés par des éléments créés après le chargement initial de la page.

Le problème

Considérez un scénario dans lequel vous avez un

élément avec l'identifiant "modal" qui est chargé dynamiquement dans la page à l'aide de la méthode load() de jQuery. Ce modal contient des éléments d'entrée que vous souhaitez surveiller pour les entrées de l'utilisateur. Cependant, lorsque vous tentez de capturer les valeurs d'entrée à l'aide de la méthode keyup, vous rencontrez un problème : l'événement ne se déclenche plus pour les éléments générés dynamiquement.

La solution

La clé pour résoudre ce problème réside dans la délégation événementielle. La délégation d'événements implique de lier les gestionnaires d'événements à un élément ancêtre statique du contenu généré dynamiquement. Cela permet aux événements de remonter jusqu'à l'ancêtre statique, où ils peuvent être gérés même pour les éléments créés après le chargement initial de la page.

jQuery fournit deux méthodes pour la délégation d'événements : .on() et .delegate( ). Pour les versions 1.7 et supérieures, la méthode recommandée est .on() :

$('#modal').on('keyup', 'input', function() {
    // Handle the event
});

Copier après la connexion

Pour les versions 1.6 et inférieures, utilisez .delegate() :

$('#modal').delegate('input', 'keyup', function() {
    // Handle the event
});

Copier après la connexion

Dans ces exemples, le le gestionnaire d'événements est lié à l'élément modal. Lorsque vous cliquez sur un élément d'entrée dans le modal, le gestionnaire d'événements est déclenché car l'événement remonte jusqu'au modal.

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!