[解決済み] jQueryで動的なHTML要素にイベントを添付するにはどうすればよいですか？[重複しています]。

質問

を持つすべての要素にイベントハンドラをアタッチする jQuery コードがあるとします。 .myclass .

例えば、こんな感じです。

$(function(){
    $(".myclass").click( function() {
        // do something
    });
});

そして、私のHTMLは次のようになります。

<a class="myclass" href="#">test1</a>
<a class="myclass" href="#">test2</a>
<a class="myclass" href="#">test3</a>

これは問題なく動作します。 しかし、もし .myclass 要素がページに書き込まれるのは、将来のある時点のことです。

例えば

<a id="anchor1" href="#">create link dynamically</a>
<script type="text/javascript">
$(function(){
    $("#anchor1").click( function() {
        $("#anchor1").append('<a class="myclass" href="#">test4</a>');
    });
});
</script>

この場合 test4 をクリックすると、リンクが作成されます。 a#anchor1 .

は test4 のリンクには click() ハンドラに関連付けられています。 class="myclass" .

基本的には click() ハンドラを一度実行すれば、ページロード時に存在するコンテンツと、後で AJAX / DHTML . この問題を解決するにはどうしたらよいでしょうか？

解決方法は？

後のjQueryリリースの変更を反映させるために、新しい回答を追加しています。.live()メソッドは、jQuery 1.7で非推奨となりました。

から http://api.jquery.com/live/

jQuery 1.7より、.live()メソッドは非推奨となりました。イベントハンドラをアタッチするには、.on()を使用してください。古いバージョンのjQueryのユーザーは、.live()よりも.delegate()を優先して使用する必要があります。

jQuery 1.7+ では、親要素にイベントハンドラをアタッチするには .on() を使用し、引数として 'myclass' と組み合わせたセレクタを渡すことができます。

参照 http://api.jquery.com/on/

だから、その代わりに

$(".myclass").click( function() {
    // do something
});

書くことができます...

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

これは、ボディに 'myclass' があるすべての a タグで、すでに存在するか、後で動的に追加されるかにかかわらず、動作します。

この例では、より近い静的な周囲のタグがないため、bodyタグが使用されていますが、.onメソッドの呼び出しが発生したときに存在する親タグであれば、どのようなものでも機能します。例えば、動的な要素が追加されるリストのulタグは、次のようになります。

$('ul').on('click', 'li', function() {
    alert( $(this).text() );
});

ulタグが存在する限り、これは動作します（li要素はまだ存在する必要はありません）。