Les événements JavaScript ne se déclenchent pas après l'ajout d'un élément dynamique

Vous rencontrez un problème où les événements JavaScript ne se déclenchent pas après l'ajout de nouveaux éléments au DOM . En effet, jQuery ne reconnaît que les éléments présents lors de son exécution initiale lors du chargement de la page.

Pour résoudre ce problème, vous devez utiliser la délégation d'événements pour capturer les événements des éléments dynamiques. La délégation d'événements implique de capturer des événements à un niveau supérieur dans le DOM qui étaient déjà présents lors du chargement de la page. Cela permet aux événements des éléments nouvellement ajoutés de remonter et d'être gérés.

Dans votre cas, vous pouvez déléguer l'événement de clic à un élément parent qui était présent lors du chargement de la page. Par exemple, vous pouvez modifier votre code JavaScript pour utiliser la méthode on() comme suit :

$(document).on('click', '.races', function(e) {
  // Your code here
});

De cette façon, tous les nouveaux éléments ajoutés avec la classe ".races" hériteront du gestionnaire d'événements click. N'oubliez pas d'utiliser la méthode on() au lieu de click() lors de l'implémentation de la délégation d'événements.