動的にロードされた HTML 要素のクリック イベントを処理する方法: `.live()` と `.on()` は?

動的にロードされた HTML のイベント処理: .live() と .on()

動的にロードされた HTML を操作する場合、次のようになります。最初は存在しない要素のイベントを処理するために不可欠です。非推奨の .live() メソッドとその推奨代替メソッドである .on() は、この課題に対処するためのさまざまなアプローチを提供します。

元の質問では、$('#parent を使用して動的に追加された要素のクリック イベントを登録することが困難であることが示されていました) ').load("http://...")。 .click() はイベントのキャプチャに失敗しますが、.live() は機能しますが、非推奨です。

解決策は、.on() を使用した委任されたイベント処理にあります。イベントを動的にロードされる要素 (#child) に直接アタッチする代わりに、子に一致するセレクターを使用して親 (#parent) にバインドします。このアプローチにより、#child がload() 操作の後に作成されても、その親に設定されたイベント ハンドラーが確実に継承されます。

このシナリオで推奨される構文は次のとおりです。

$('#parent').on("click", "#child", function() {});

このようにして、クリック イベント リスナーは #parent にアタッチされ、親が最初に作成されたときに #child が存在しない場合でも、#child から発生するクリックはすべてイベント ハンドラーによってキャプチャされて処理されます。作成されました。

以上が動的にロードされた HTML 要素のクリック イベントを処理する方法: `.live()` と `.on()` は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。