jQuery イベント処理: 動的に読み込まれる要素の .live() と .on() の違い?

動的 HTML でのイベント処理: jQuery .live() と .on()

動的にロードされた HTML を操作する場合、イベント ハンドラーを追加する新しく作成された要素を操作するのは難しい場合があります。この質問では、動的に読み込まれる要素にクリック イベントをアタッチするための jQuery の .live() メソッドと .on() メソッドの違いについて説明します。

jQuery v1.7.1 では、.live() は非推奨になりました。代わりに、動的に作成されたコンテンツのイベント処理には .on() を使用することをお勧めします。ただし、質問者は、.on() が $('#parent').load() で動的にロードされた要素のクリック イベントを登録できないという状況に遭遇しました。

このシナリオの正しい方法はイベント委任です。 .on() を使用して実現されます。イベント委任には、動的コンテンツが読み込まれる前に存在する親要素にイベント ハンドラーをアタッチすることが含まれます。次に、イベント ハンドラーは、動的に作成された要素から発生するイベントをリッスンするように構成されます。

たとえば、#parent に動的にロードされた #child 要素にクリック ハンドラーをアタッチするには、次のようにします。

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

このアプローチにより、イベント ハンドラーがアタッチされたときに #child 要素が存在しなかった場合でも、イベント ハンドラーは #child 要素のクリック イベントをキャプチャできるようになります。これは、クリック イベントが、#child 要素に対してイベント ハンドラーが定義されている #parent 要素までバブルアップするためです。

イベントの委任は、動的に作成された要素にクリック ハンドラーを追加する問題を解決し、次の場合に推奨されるアプローチです。動的にロードされた HTML を操作します。

以上がjQuery イベント処理: 動的に読み込まれる要素の .live() と .on() の違い?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。