Comment puis-je gérer les événements des éléments ajoutés dynamiquement dans jQuery ?

Gestion des événements déclenchés par des éléments générés dynamiquement

Lors de l'ajout dynamique d'éléments au DOM, la capture des événements déclenchés par ces éléments à l'aide de gestionnaires d'événements standard peut être problématique. Ce problème se produit car les gestionnaires d'événements sont attachés avant la création des éléments, ce qui entraîne la non capture des événements.

jQuery fournit une solution à ce problème grâce à l'utilisation de la méthode .on() (ou .delegate () dans les anciennes versions). Cette méthode vous permet de déléguer la gestion des événements à un élément ancêtre statique, qui existe déjà lorsque le gestionnaire est lié. Cela garantit que les événements bouillonnent et peuvent être capturés par le gestionnaire.

Dans votre cas spécifique, vous pouvez modifier votre code pour utiliser la méthode .on() comme suit :

// jQuery 1.7 or above
$('#modal').on('keyup', 'input', function() {
    handler = $(this).val();
    name = $(this).attr('name');
});

// jQuery 1.6 ou version antérieure

$('#modal').delegate('input', 'keyup', function()
{
    handler = $(this).val();
    name = $(this).attr('name');
});

En déléguant la gestion des événements à l'élément #modal, qui existe déjà lorsque les gestionnaires d'événements sont liés, vous pouvez capturer les événements déclenchés par des éléments d'entrée générés dynamiquement au sein de cet élément.

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!