jQuery を使用して動的に作成された HTML 要素にイベント ハンドラーをアタッチするにはどうすればよいですか?

jQuery を使用した動的 HTML 要素へのイベントの添付

jQuery で、動的に作成された HTML 要素にイベント ハンドラーを添付するには、静的要素とは異なるアプローチが必要です。 AJAX や DHTML などの技術を通じてページに追加された動的 HTML 要素には、明示的に処理されない限り、イベント バインディングがありません。

クラス ".myclass" を持つすべての要素にイベント ハンドラーを付加する jQuery コードがあるとします。これは、ページの読み込み時に存在する要素に対してはシームレスに機能しますが、動的に作成された「.myclass」要素にイベント ハンドラーをアタッチするには課題が生じます。

これに対処するには、次の 2 つの手法を使用できます。

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

jQuery 1.7 以降では、.live() メソッドは非推奨になりました。代わりに、.on() を使用してイベント ハンドラーをアタッチする必要があります。このメソッドを使用すると、親要素を選択するセレクターを指定し、それをイベントを処理する動的要素のセレクターと組み合わせることができます。

例:

$('body').on('click', 'a.myclass', function() {
    // Do something
});

この例では、たとえば、イベント ハンドラーは、ページの読み込み時に存在するか動的に追加されるかに関係なく、body タグ内の myclass クラスを持つすべての a タグにアタッチされます。

jQuery の .delegate() メソッドの使用

1.7 より前の jQuery バージョンでは、.on() の代わりに .delegate() メソッドを使用できます。構文は似ており、親セレクターと動的要素のセレクターを指定できます。

$('body').delegate('a.myclass', 'click', function() {
    // Do something
});

これらの手法のいずれかを使用すると、静的および動的に作成された HTML 要素の両方にイベント ハンドラーが確実にアタッチされます。動的コンテンツのイベントを処理するのに便利です。

以上がjQuery を使用して動的に作成された HTML 要素にイベント ハンドラーをアタッチするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。