javascript - 追加した要素 - jQueryでは、動的HTML要素にイベントを添付する方法は?




jquery 追加した要素 取得 (6)

この質問には既に回答があります:

クラス "myclass"を持つすべての要素にイベントハンドラをアタッチするjQueryコードがいくつかあるとします。 例えば:

$(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>

この場合、ユーザーが#anchor1をクリックすると "test4"リンクが作成されます。

"test4"リンクには、class = "myclass"が設定されていてもclick()ハンドラが関連付けられていません。

どのように私はこれを修正することができますどのような考え?

基本的には、click()ハンドラを一度記述して、ページロード時のコンテンツとAjax / DHTML経由で後で取り込まれるコンテンツの両方に適用したいと考えています。


DOMに複数のアンカーを追加する場合は、代わりにイベント委任を調べてください。

ここに簡単な例があります:

$('#somecontainer').click(function(e) {   
  var $target = $(e.target);   
  if ($target.hasClass("myclass")) {
    // do something
  }
});

jQuery 1.7の後では、 http://api.jquery.com/on/.off()

ショーンの答えがその一例です。

廃止予定:

jQuery関数の.live()および.die()ます。 jQuery 1.3.xで利用可能

ドキュメントから:

クリックするたびに各段落のテキストをアラートボックスに表示するには:

$("p").live("click", function(){
  alert( $(this).text() );
});

また、 livequeryプラグインはこれを行い、より多くのイベントをサポートします。


live()関数を使用したいとします。 .live()参照してください。

例えば:

$("#anchor1").live("click", function() {
    $("#anchor1").append('<a class="myclass" href="#">test4</a>');
});

あなたのjQuery 1.3以降であれば使用してください。 .live()

現在の要素と将来一致するすべての要素のハンドラをイベント(クリックなど)にバインドします。 カスタムイベントをバインドすることもできます。


時にはこれを行う(一番上の投票の答え)だけでは十分ではありません:

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

これは、イベントハンドラが起動されたために問題になる可能性があります。 あなたがこれをやっているが、それが処理される順序のために問題を引き起こしているなら、いつでもそれを関数にラップすることができ、リスナーと呼ばれるときにリスナーをリフレッシュすることができます。

例えば:

function RefreshSomeEventListener() {
    // Remove handler from existing elements
    $("#wrapper .specific-selector").off(); 

    // Re-add event handler for all matching elements
    $("#wrapper .specific-selector").on("click", function() {
        // Handle event.
    }
}

それは関数なので、リスナーをこのように設定するたびに、通常はドキュメントの準備をしています:

$(document).ready(function() {
    // Other ready commands / code

    // Call our function to setup initial listening
    RefreshSomeEventListener();
});

次に、動的に追加された要素を追加するたびに、そのメソッドを再度呼び出します。

function SomeMethodThatAddsElement() {
    // Some code / AJAX / whatever.. Adding element dynamically

    // Refresh our listener, so the new element is taken into account
    RefreshSomeEventListener();
}

うまくいけば、これは役立ちます!

よろしく、


現在の要素と将来一致するすべての要素のハンドラをイベント(クリックなど)にバインドします。 カスタムイベントをバインドすることもできます。

.live()

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




dhtml