4

javascriptアクションを追加したいリンクがいくつかあるとしましょう：

<a class='test'>
<a class='test'>
<a class='test'>

ページが読み込まれると、すべてのクリックイベントが発生します。

$('.test').click(function(){
  alert("I've been clicked!")
});

しかし、後で別の要素を追加して、同じイベントを与えたいとしましょう。私はこれを行うことはできません：

$('.test').click(function(){
  alert("I've been clicked!")
});

最初の3つには2つのイベントがあるからです。これに対処するための最良の方法は何ですか？

4

5 に答える 5

8

このように、常に dom に存在する親要素に $.on をバインドできます。

$(document).on('click','.test', function() {
            console.log('Test clicked');
        });

注意:document常に dom に存在する要素の任意の親に 置き換えることができ、親が近いほど良いです。

単純なイベント バインディングは、バインド時に DOM に既に存在する要素にイベント ハンドラーをバインドするため、click機能しません。clickそのため、後で Ajax または jQuery を介して dom に動的に追加された要素では機能しません。そのためには、 を使用する必要がありますevent delegation。そして、あなたは$.onその目的のために使用することができます.

$.onのドキュメントを確認してください

使用できます$.liveが、$live は減価償却されます。代わりに $.on を使用してください。同じことを行う $.live と $.delegate の $.on の同等の構文

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(document).on(events, selector, data, handler);        // jQuery 1.7+

この場合、イベント ハンドラは にバインドされdocumentます。この場合、イベントは jQuery によって対象の要素に委譲されtestます。

アップデート

他のすべてのメソッドがフードの下を経由してメソッド$.onを通過するため、すべてのイベント処理の目的で使用することをお勧めします。$.on$.off

jQueryソースv.1.7.2からこれらの関数の定義を確認してください

bind: function( types, data, fn ) {
    return this.on( types, null, data, fn );
},
unbind: function( types, fn ) {
    return this.off( types, null, fn );
},

live: function( types, data, fn ) {
    jQuery( this.context ).on( types, this.selector, data, fn );
    return this;
},
die: function( types, fn ) {
    jQuery( this.context ).off( types, this.selector || "**", fn );
    return this;
},

delegate: function( selector, types, data, fn ) {
    return this.on( types, selector, data, fn );
},
undelegate: function( selector, types, fn ) {
    // ( namespace ) or ( selector, types [, fn] )
    return arguments.length == 1? this.off( selector, "**" ) : this.off( types, selector, fn );
}

これは、これらの便利なイベント ハンドラーにも当てはまります。

blur focus focusin focusout load resize scroll unload click dblclick mousedown 
mouseup mousemove mouseover mouseout mouseenter mouseleave change select 
submit keydown keypress keyup error contextmenu

すべてのメソッドが使用$.onしていることと、$.offそれ自体を確認できます。したがって$.on、ほとんどの場合、それほど重要ではありませんが、少なくとも関数呼び出しを保存できます。

于 2012-05-31T04:48:26.370 に答える
4

あなた.testはajaxを介して追加されるので、その上でデリゲートイベントが必要なので、通常のバインディングはそれらに影響を与えません。デリゲートバインディングは、DOMに存在するすべての要素に適用され、DOMに追加されます。

$('body').on('click', '.test', function() {
   // your code
});

代わりに、すでにDOMに属しているbodyすべてのコンテナを使用できます。.test

についてもっと知る.on()

.delegate()次のように使用することもできます。

$('#container').delegate('.test', 'click', function() {
   // your code
});
于 2012-05-31T04:48:19.790 に答える
1

要素がページに動的に追加される場合は、イベントのjQueryを確認してください。たとえば、次のことを考慮してください。

http://jsfiddle.net/n1ck/QQYq2/2/

于 2012-05-31T04:51:39.020 に答える
0

を使用しon()、それを含む要素にアタッチします。

$(".container").on("click", ".test", function(){
    alert("You clicked me!");   
});
于 2012-05-31T04:48:47.947 に答える
0

新しいコンテンツをDOMに（ajaxまたはjavascriptを介して）挿入すると、既存のバインディングが機能しないため、イベントを再バインドするかjQuery on、現在の要素と将来の要素で機能するものを使用する必要があります

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

したがって、これを修正するには、変更します

$('.test').click(function(){
  alert("I've been clicked!")
});

に

$(document).on('click','.test',function(){
  alert("I've been clicked!")
});
于 2012-05-31T04:49:00.347 に答える