Comment lier l'é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 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() :

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 div #container. Lorsque vous cliquez sur un de ces éléments, un message d'alerte est déclenché.