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

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

jQuery のload() や click() などのメソッドを使用して要素を動的に生成すると、トリガーされるイベントがキャプチャされますこれらの要素によって、困難になる可能性があります。静的要素に関連付けられた標準のイベント ハンドラーは、動的に生成された要素では機能しない可能性があります。

解決策: イベントの委任

イベントの委任は、イベントを処理できるようにする手法です。動的に作成された要素から泡立ちます。イベントを静的祖先要素に委任すると、イベント ハンドラーがバインドされたときにイベントが存在することが保証されます。

jQuery の .on() メソッドを使用する

jQuery バージョンの場合1.7 以降では、.on() メソッドを使用してイベント:

$('#modal').on('keyup', 'input', function() {
    handler = $(this).val();
    name = $(this).attr('name');
});

jQuery の .delegate() メソッドの使用 (古いバージョン)

古い jQuery バージョン (1.6 以下) の場合は、.delegate() を使用します。代わりにメソッド:

// Note the different order of selector and event
$('#modal').delegate('input', 'keyup', function() {
    handler = $(this).val();
    name = $(this).attr('name');
});

イベント委任を使用すると、次のことができます。要素の作成とイベントのバインディングの順序を気にせずに、動的に生成された要素によってトリガーされるイベントを効果的に処理します。

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