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

動的に生成された要素によってトリガーされるイベントの処理

DOM に要素を動的に追加する場合、標準のイベント ハンドラーを使用してそれらの要素によってトリガーされるイベントをキャプチャすると問題が発生する可能性があります。この問題は、要素が作成される前にイベント ハンドラーがアタッチされ、その結果イベントがキャプチャされないために発生します。

jQuery は、.on() メソッド (または .delegate) を使用してこの問題の解決策を提供します。 (古いバージョンでは)。このメソッドを使用すると、ハンドラーがバインドされたときにすでに存在する静的な祖先要素にイベント処理を委任できます。これにより、イベントが確実に発生し、ハンドラーでキャプチャできるようになります。

特定のケースでは、次のように .on() メソッドを使用するようにコードを変更できます。

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

// jQuery 1.6 以下

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

イベント処理を #modal 要素に委任することにより、イベントの実行時に既に存在します。ハンドラーがバインドされている場合、その要素内で動的に生成された入力要素によってトリガーされたイベントをキャプチャできます。

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