動的要素の追加後に JavaScript イベントがトリガーされないのはなぜですか?

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

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

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

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

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

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

以上が動的要素の追加後に JavaScript イベントがトリガーされないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。