JavaScript で動的に追加された DOM 要素のイベントを処理するにはどうすればよいですか?

動的 DOM 変更後の JavaScript イベント処理

JavaScript 要素が Web ページに動的に追加されると、イベント処理で問題が発生する可能性があります。新しく追加された要素です。このようなシナリオでは、JavaScript は追加された要素とその定義されたイベント リスナーを認識しません。

この問題に対する解決策の 1 つは、イベント委任です。イベント委任を使用すると、イベントは新しく追加された要素から、JavaScript の初期化時に使用可能だった既存の親要素にバブルアップされます。イベント リスナーを動的に追加された各要素に割り当てるのではなく、既存の要素と将来の要素の両方を含む上位レベルの親要素に割り当てます。

特定のコードのコンテキストでは、代わりに on() メソッドの使用を検討してください。 click() メソッドのイベント ハンドラーを実装します。 on() メソッドはイベント委任をサポートしており、ページが読み込まれたときに存在していた親にイベントを委任できます。

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

イベント委任をコードに組み込むことで、イベント ハンドラーが確実に動的に追加された要素に対して登録され、機能するようになり、アプリケーションで追加された要素に対して JavaScript イベント リスナーが起動できないという問題が解決されました。

以上がJavaScript で動的に追加された DOM 要素のイベントを処理するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。