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

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

Web 開発の領域では、動的に生成された要素からのイベントの処理が課題となる場合があります。この記事では、最初のページの読み込み後に作成された要素によってトリガーされるイベントをキャプチャする問題について説明します。

問題

$('#modal').on('keyup', 'input', function() {
    // Handle the event
});

$('#modal').delegate('input', 'keyup', function() {
    // Handle the event
});

jQuery のload() メソッドを使用してページに動的にロードされる ID が「modal」の要素。このモーダルには、ユーザー入力を監視する入力要素が含まれています。ただし、keyup メソッドを使用して入力値をキャプチャしようとすると、動的に生成された要素に対してイベントが起動しなくなるという問題が発生します。解決策 この問題を解決する鍵はイベント委任にあります。イベントの委任には、動的に生成されたコンテンツの静的な祖先要素にイベント ハンドラーをバインドすることが含まれます。これにより、イベントが静的な祖先までバブルアップし、最初のページ読み込み後に作成された要素であってもイベントを処理できるようになります。jQuery には、イベント委任のための 2 つのメソッド、.on() と .delegate() が用意されています。 ）。バージョン 1.7 以降の場合、推奨されるメソッドは .on():です。バージョン 1.6 以下の場合、.delegate():を使用します。これらの例では、イベント ハンドラーはモーダル要素にバインドされます。モーダル内の入力要素がクリックされると、イベントがモーダルにバブルアップするため、イベント ハンドラーがトリガーされます。

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