web-dev-qa-db-ja.com

jQuery .clickは、イベントを置き換えるのではなく、イベントに追加し続けます

私は 次のコードブロック を持っています：

function testJQueryClick(){
     $('#button2').click(function(){ alert ('Debug'); return false; });       
}

関数を1回呼び出すと（ボタン2をクリックすると）、予期したアラートが表示されます。同じ関数をもう一度呼び出してボタン2をクリックすると、2つのアラートが表示され、3回目は3つが表示されます。jQueryは.clickイベントを置き換えるのではなく、毎回追加しているようです。

.clickハンドラーは、呼び出すたびに置換されると思います。 jQueryのドキュメント には、これが期待される動作であることを確認するものが見つかりません。

jqueryclick
25
Mark Henderson

最初にoffを呼び出して、古いイベントリスナーを削除します。

function testJQueryClick () {
    $('#button2').off('click').on('click', function () {
        alert ('Debug');

        return false;
    });      
}

動作中のペンでそれを参照してください 。

43
Joseph Silber

http://api.jquery.com/bind/ にあるbind（）メソッドのドキュメントを確認してください。 「click（）」、「focus（）」などのイベントバインディングメソッドは、bind（eventtype）のショートカットにすぎないので、 bind（）ドキュメントは、すべてのイベントバインドがどのように機能するかについての洞察を提供します。私はあなたの特定の問題に関係するビットは次のとおりだと思います：

「イベントが要素に到達すると、その要素のそのイベントタイプにバインドされているすべてのハンドラーが起動されます。」

つまり、ハンドラー "function（）{alert（ 'Debug'）; return false;}"をクリックイベントに5回バインドすると、5つすべてが実行されます。

補足として、onclickハンドラーにバインドするための推奨される最新の方法は、リンクの「onclick」属性を完全にバイパスし、jQueryを使用してDOMロードですべてのバインドを実行することです。これは、より新しいバインドを使用し、trigger（）メソッドを使用して、＃button1がクリックされたときに＃button2クリックハンドラーを起動する例です（これは、例で達成しようとしていたことです）。

$(document).ready(function() {
    $('#button2').click(function(){ alert ('Debug'); return false; });  // Bind alert to #button2 click
    $('#button1').click(testJQueryClick);                                           // Bind testJQueryClick() to #button1 click
});

function testJQueryClick(e) {
    $('#button2').trigger('click'); // Trigger #button2 click handler
}
3
Joe Landsman

イベントのバインド中、jqueryは、コントロールにすでにバインドされているイベントを考慮せず、もう1つのイベントをバインドするだけです。

バインド解除例：

$('selector').unbind("eventType");

unbind AP​​Iを使用して、バインドされたイベントを最初に削除するか、同じクリックイベントハンドラーであるが、同じセレクターを持つ新しいコントロールがdomに挿入されているために複数回呼び出す場合は、おそらくliveapiの使用を見てください。

Tihsがお役に立てば幸いです。

2
Baz1nga

前述のように、新しいクリックハンドラーを置き換える場合は、新しいクリックハンドラーを追加する前に、古いクリックハンドラーを削除する必要があります。

JQuery 1.7以降、推奨される方法は off を使用することです。 （unbindはjQuery3で非推奨になりました）

例えば：

function testJQueryClick(){
    $('#button2').off('click').click(function(){alert ('Debug'); return false;});       
}
1
Eborbob

これは、新しいクリックハンドラーを割り当てるたびに発生するためです。それはこれだけでなければなりません：

$('#button2').click(function(){ alert ('Debug'); return false; });

もちろん、ドキュメントがロードされた後。

0
Sunjay Varma