Pourquoi mes événements JavaScript ne se déclenchent-ils pas après l'ajout de nouveaux éléments ?

JavaScript ne se déclenche pas après l'ajout

Résumé du problème

Lors de l'ajout de nouveaux éléments d'entrée à une page Web à l'aide de JavaScript, les événements suivants peuvent ne pas se déclencher. En effet, jQuery n'est pas au courant de ces éléments nouvellement ajoutés.

Délégation d'événements et bouillonnement

jQuery fonctionne en enregistrant des gestionnaires d'événements pour des éléments spécifiques. Cependant, lorsque de nouveaux éléments sont ajoutés dynamiquement, ces gestionnaires d'événements ne peuvent pas les reconnaître. Pour résoudre ce problème, la délégation d'événements est utilisée.

La délégation d'événements implique l'écoute des événements sur un élément parent qui est déjà présent dans le DOM au moment du chargement de jQuery. Lorsqu'un événement se produit dans un élément enfant imbriqué, il remonte jusqu'à l'élément parent, où le gestionnaire d'événements peut le capturer.

Solution de code

Pour utiliser la délégation d'événement dans le code fourni, le les gestionnaires d'événements pour les boutons doivent être modifiés pour utiliser la méthode on(). Cette méthode permet de déléguer l'écoute d'événement à un élément parent.

$(document).on('click', '.races', function(e) {
  // ... rest of the code
});

En utilisant $(document).on(), l'événement sera délégué à l'objet document, qui est présent dans le DOM lors chargement des pages. Cela garantit que les événements des éléments .races nouvellement ajoutés seront capturés et gérés par le gestionnaire d'événements.

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!