jQueryで動的に生成された要素のイベントを処理するにはどうすればよいですか?

動的に生成された要素のイベント処理

Web アプリケーションで要素を動的に生成する場合、これらの要素によってトリガーされるイベントをキャプチャする際に問題が発生する場合があります。これは、動的要素が DOM に追加される前にイベント ハンドラーが定義されている場合に特に注意が必要です。

jQuery には、このシナリオを処理するために設計された特定のメソッドがあります。

Event Delegation with . on() または .delegate()

jQuery のバージョン 1.7 以降では、.on() メソッドは次の目的で使用されます。デリゲートイベント。古いバージョンの場合、 .delegate() は同じ目的を果たします。これらのメソッドを使用すると、イベント ハンドラーを静的な祖先要素にバインドでき、動的子孫から伝播されたイベントを自動的にキャプチャします。

たとえば、動的に生成されたモーダル ダイアログがある場合、keyup イベントを個々の入力要素の代わりにモーダル要素:

$('#modal').on('keyup', 'input', function() {
    // Event handler code
});

の構文.on()

$(selector).on(eventName, selector, handler);

.delegate() の構文

$(selector).delegate(selector, eventName, handler);

使用法

• selector: 親または祖先イベントハンドラーがバインドされる要素。この要素はバインド時に DOM に存在する必要があります。
• selector (for .on()): イベントをトリガーする子孫要素と一致するセレクター。
• eventName: 「keyup」や「keyup」など、処理するイベントのタイプ。 "click".
• handler: イベントの発生時に実行するコールバック関数。

イベント委任を使用すると、動的要素によってイベントが確実にトリガーされます。適切なイベント ハンドラーによって適切にキャプチャされ、処理されます。

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