動的要素の追加後に JavaScript イベントがトリガーされない

DOM に新しい要素を追加した後に JavaScript イベントが起動しないという問題が発生しています。 。これは、jQuery がページの読み込み中に最初に実行されるときに存在する要素のみを認識するためです。

これを解決するには、イベント委任を使用して動的要素からイベントをキャプチャする必要があります。イベント委任には、ページの読み込み中にすでに存在していた DOM 内のより高いレベルでのイベントの捕捉が含まれます。これにより、新しく追加された要素からのイベントがバブルアップして処理されるようになります。

この場合、ページの読み込み中に存在した親要素にクリック イベントを委任できます。たとえば、次のように on() メソッドを使用するように JavaScript コードを変更できます。

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

このように、クラス ".races" で追加された新しい要素はクリック イベント ハンドラーを継承します。イベント委任を実装するときは、click() の代わりに on() メソッドを使用することを忘れないでください。