JavaScript-Ereignisse werden nach dem Anhängen dynamischer Elemente nicht ausgelöst

Sie stoßen auf ein Problem, bei dem JavaScript-Ereignisse nach dem Anhängen neuer Elemente an das DOM nicht ausgelöst werden . Dies liegt daran, dass jQuery nur vorhandene Elemente erkennt, wenn es zum ersten Mal während des Ladens der Seite ausgeführt wird.

Um dieses Problem zu beheben, müssen Sie die Ereignisdelegation verwenden, um Ereignisse aus dynamischen Elementen zu erfassen. Bei der Ereignisdelegierung geht es darum, Ereignisse auf einer höheren Ebene im DOM abzufangen, die bereits beim Laden der Seite vorhanden waren. Dadurch können Ereignisse von neu hinzugefügten Elementen in die Luft sprudeln und verarbeitet werden.

In Ihrem Fall können Sie das Klickereignis an ein übergeordnetes Element delegieren, das beim Laden der Seite vorhanden war. Sie könnten beispielsweise Ihren JavaScript-Code so ändern, dass er die Methode on() verwendet:

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

Auf diese Weise erben alle neuen Elemente, die mit der Klasse „.races“ hinzugefügt werden, den Click-Event-Handler. Denken Sie daran, bei der Implementierung der Ereignisdelegierung die Methode on() anstelle von click() zu verwenden.