Comment attacher des événements Onclick à des éléments ajoutés dynamiquement avec jQuery ?

Comment lier un événement Onclick à des éléments HTML ajoutés dynamiquement avec jQuery

Lorsque vous travaillez avec jQuery, il est souvent nécessaire d'ajouter dynamiquement des éléments HTML à la page. Dans de tels cas, vous souhaiterez peut-être attacher des gestionnaires d’événements à ces éléments. Cependant, attacher des gestionnaires d'événements aux éléments ajoutés après le chargement de la page peut s'avérer difficile.

Le problème et la solution précédente

Traditionnellement, on pouvait utiliser la méthode .bind() pour attachez des gestionnaires d’événements aux éléments ajoutés dynamiquement. Cependant, cette méthode est obsolète au profit de la méthode .on().

Solution correcte avec .on()

Pour lier correctement un événement onclick à un élément ajouté dynamiquement avec jQuery, vous devez utiliser la méthode .on() comme suit :

$(document).on('click', '.my-element', function() {
  // Your event handling code goes here
});

Dans cet exemple, la méthode .on() est utilisée pour attacher un gestionnaire d'événements au document, en spécifiant le l'événement 'click' et le sélecteur '.my-element'. Cela garantit que tout élément avec la classe « my-element » déclenchera le gestionnaire d'événements, quel que soit le moment où il a été ajouté à la page.

Exemple d'utilisation

Voici un exemple d'implémentation de la méthode .on() :

<div>

Dans cet exemple, la méthode .on() est utilisée pour attacher un gestionnaire d'événements à n'importe quel élément avec la classe 'my-element' dans le #conteneur div. Lorsque l’on clique sur l’un de ces éléments, cela déclenchera un message d’alerte.

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!