新しい要素を追加した後に JavaScript イベントが起動しないのはなぜですか?

追加後に JavaScript が起動しない

問題の概要

JavaScript を使用して Web ページに新しい入力要素を追加すると、後続のイベントがトリガーされない場合があります。これは、jQuery がこれらの新しく追加された要素を認識しないためです。

イベント委任とバブリング

jQuery は、特定の要素のイベント ハンドラーを登録することによって機能します。ただし、新しい要素が動的に追加されると、これらのイベント ハンドラーはそれらを認識できません。これを解決するには、イベント委任が使用されます。

イベント委任には、jQuery のロード時に DOM にすでに存在する親要素のイベントをリッスンすることが含まれます。ネストされた子要素内でイベントが発生すると、親要素にバブルアップして、イベント ハンドラーがそれをキャプチャできます。

コード ソリューション

提供されたコードでイベント委任を使用するには、ボタンのイベント ハンドラーは、on() メソッドを使用するように変更する必要があります。このメソッドを使用すると、イベント リスニングを親要素に委任できます。

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

$(document).on() を使用すると、イベントは、実行中に DOM に存在するドキュメント オブジェクトに委任されます。ページの読み込み。これにより、新しく追加された .races 要素からのイベントが確実にキャプチャされ、イベント ハンドラーによって処理されるようになります。

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