JavaScript イベント ハンドラーが追加された要素でトリガーに失敗するのはなぜですか?

追加された要素に対して JavaScript イベント ハンドラーがトリガーされない理由

提供された HTML などで新しい要素を DOM に追加するときコードでは、以前に定義された JavaScript イベント ハンドラーが新しい要素を認識しない可能性があります。 JavaScript コードはイベントをトリガーするために特定の要素の存在に依存しているため、これにより予期しない動作が発生する可能性があります。

この問題を解決するには、イベント委任を使用する必要があります。イベント委任は、ページの読み込み時に存在する親要素にイベント ハンドラーをアタッチする手法です。後で追加された子要素でイベントが発生すると、イベントは親要素にバブルアップされ、親にアタッチされたイベント ハンドラーがトリガーされます。

提供されたコードでは、クリックをアタッチしました。 .races 要素へのイベント ハンドラー。ただし、新しい要素が DOM に追加されると、jQuery はそれらの要素を認識しません。これは、jQuery がページ読み込み時に初期化したときにそれらの要素が存在しなかったためです。

これを修正するには、クリック イベントを最も近い親要素に委任できます。 .races コンテナ div など、ページの読み込み時に存在します。更新されたコードは次のとおりです。

$(document).ready(function(){
  $('.races-container').on('click', '.races', function(e){
    ... // Your event handler code
  })
});

イベントを .races-container div に委任することで、jQuery は既存の .races 要素と新しく追加された .races 要素の両方のクリックを処理できるようになり、イベント ハンドラーが確実にトリガーされるようになります。

イベント委任は、要素上のイベントを処理できるため、動的に生成されたコンテンツを操作する場合の一般的な手法であることを覚えておいてください。ページの読み込み時には存在しない可能性があります。

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