モーダル内で動的に生成された要素からイベントをキャプチャするにはどうすればよいですか?

動的に生成された要素からのイベントのキャプチャ

モーダル DIV 内で動的に生成された要素によってトリガーされるイベントが取得されないという問題が発生しています。既存のイベント ハンドラーによってキャプチャされます。この問題は、イベント ハンドラーがバインドされた後に追加されるこれらの要素の動的な性質が原因で発生します。

この問題に対処するために、jQuery には .on と .delegate (jQuery バージョン 1.7 より前の場合) という 2 つのメソッドが用意されています。 ）。これらのメソッドを使用すると、ハンドラーがバインドされたときに存在する静的な祖先要素にイベントを委任できます。この場合、モーダル DIV は静的な祖先として機能します。

.on または .delegate を使用すると、祖先要素内で動的に生成された要素であっても、イベントが確実に祖先要素までバブルアップし、イベント ハンドラーをトリガーできます。それ。 .on メソッドを利用する更新されたコードは次のとおりです。

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

また、1.7 より前の jQuery バージョンの場合は、次のように .delegate メソッドを使用できます。

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

これを実装すると、ソリューションを使用すると、モーダル DIV 内で動的に生成された要素によってトリガーされるイベントを効果的にキャプチャして処理でき、ユーザーの入力が確実に記録されます。

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