Comment lier des événements Onclick à des éléments HTML insérés dynamiquement dans jQuery ?

jQuery : Lier des événements Onclick à des éléments HTML insérés dynamiquement

Dans jQuery, il est possible de lier des gestionnaires d'événements à des éléments ajoutés à le DOM après le chargement de la page. Cependant, certaines méthodes utilisées précédemment, telles que .bind() et .live(), sont obsolètes. Cet article explique comment lier correctement les événements onclick aux éléments ajoutés dynamiquement à l'aide de la méthode .on() mise à jour.

Le code fourni montre l'ajout dynamique d'un élément de lien à l'aide de la méthode .append() de jQuery. Cet élément contient un écouteur d'événement onclick lié à l'aide de la méthode .bind(). Cependant, l'écouteur d'événements n'est pas déclenché lorsque le lien est cliqué.

Pour résoudre ce problème, utilisez la méthode .on() au lieu de .bind(). .on() est une méthode plus récente utilisée pour la délégation d'événements et permet aux gestionnaires d'événements d'être liés à des éléments qui ne sont pas présents dans le DOM au moment de la gestion des événements.

Le code correct pour lier un L'événement onclick aux éléments ajoutés dynamiquement est :

$(document).on('click', 'selector-to-your-element', function() {
    // Code here ...
});

Dans cet extrait de code, le sélecteur de votre élément représente le sélecteur qui identifie les éléments ajoutés dynamiquement auxquels vous souhaitez lier le événement à. Lorsqu'un élément correspondant à ce sélecteur est cliqué, le code à l'intérieur du gestionnaire d'événements sera exécuté.

En utilisant .on() de cette manière, vous pouvez vous assurer que les événements onclick sont correctement liés aux éléments ajoutés au DOM. 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!