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

jQuery を使用してイベントを動的要素にバインドする方法

クラス .myclass を持つ要素にイベント ハンドラーをアタッチする既存の jQuery コードがあるとします。 。ただし、これらの要素が AJAX または DHTML 経由でページに動的に追加されるシナリオでは、新しく作成された要素には、関連付けられたクリック ハンドラーがありません。

問題の解決策

この問題に対処するために、jQuery はいくつかのアプローチを提供しています。

1. .on() メソッド (jQuery 1.7 ):

.live() メソッドを .on() に置き換え、引数として親要素と .myclass を組み合わせるセレクターを指定します。

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

これにより、クリック ハンドラーがすべての <a> にアタッチされます。いつページに追加されるかに関係なく、.myclass クラスのタグ。

2. .delegate() メソッド (jQuery 1.6 - 1.8):

.delegate() メソッドは .on() と同様に動作しますが、親要素を括弧内に指定する必要があります:

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

.on() と .delegate() の両方で、動的に追加されたイベントの処理が可能になります要素。

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