☰

jQuery を使用して動的な HTML 要素にイベントをアタッチするにはどうすればよいですか? [重複] 質問する

tag-icon • tag-icon javascript jquery events dhtml
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"。

基本的に、ハンドラーを一度記述して、ページの読み込み時に存在するコンテンツと、後でAJAX / DHTMLclick()経由で取り込まれるコンテンツの両方に適用したいと思います。これを修正する方法はありますか?

ベストアンサー1

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

からhttp://api.jquery.com/ライブ/

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 要素がまだ存在する必要はありません)。

おすすめ記事