jquery .off（）：特定のクリックハンドラを削除するにはどうすればよいですか？

Question

私はそれに結合された2つのハンドラを持つ要素ました：私はそれらの一つだけ）（.offにしようとしているが、構文は私が間に何かをしようとしている:-(私を見逃さ

<button class="pippo pluto"> 
    push me 
</button> 

$('.pippo').on('click', function() { 
    alert("pippo"); 
}); 


$('.pluto').on('click', function() { 
    alert("pluto"); 
}); 

を..

<button class="dai"> 
    remove 
</button> 

$('.dai').on('click', function() { 
    $('.pippo').off('click'); 
    alert("ok, removed"); 
}); 

のラインが、これはハンドラの両方を削除します。だから私は

$('.pippo').off('click .pippo'); 

...としようとしているが、その後何も削除されません取得します。

$('.pippo').off('click .pippo'); 

が、バック広場〜1： は、だから私は、真ん中のスペースを削除し、両方のハンドラが削除されます。

正しい構文は...？

https://jsfiddle.net/6hm00xxv/

Answer 1

.off();メソッドを使用すると、複数のものを特定のイベントとしてターゲットに設定できます。

• $('.pippo').off()は、.pippoセレクタのすべてのイベントを削除します。
• $('.pippo').off('click').pippo
• $('.pippo').off('click', handler)のためにすべてのclickのイベントを削除するだろうが.pippoセレクタのそのハンドラを持つすべてのclickのイベントを削除します。 handlerは、そのイベントをオフにするoff()方法で使用することはできませんので、イベントリスナーを追加するために使用handlerは、匿名関数であった、あなたの場合は

。 3つのオプションがあります。変数を使用するか、名前空間を使用するか、その両方を使用します。

使い方がわかりやすいです。

if("The same handler is needed more than once"){ 
    // you should assign it to a variable, 
} else { 
    // use an anonymous function. 
} 

if ("I intent to turn off the event" && ("The handler is an anonymous function" || "I want to turn off multiple listeners for this selector at once")){ 
    // use a namespace 
} 

あなたの場合

• あなたのハンドラは匿名関数である必要がありますので、あなたのハンドラは、一度だけ使用されます。
• イベントをオフにしたい場合、ハンドラは匿名ですので、名前空間を使用してください。

だから、それはあなたが好む場合は、変数をハンドラとして割り当てるために同じようにうまくいくでしょう。この

$('.pippo').on('click.group1', function() { 
    alert("pippo"); 
}); 

$('.dai').on('click', function() { 
    $('.pippo').off('click.group1'); 
    alert("ok, removed"); 
}); 

ようになります。 削除するセレクター、イベントタイプ、およびハンドラーを指定できます。

var pippo_click = function (e) { 
    alert("pippo"); 
}); 

$('.dai').on('click', function() { 
    $('.pippo').off('click', pippo_click); 
    alert("ok, removed"); 
}); 

しかし、必要がない場合は、原則として変数を作成しないでください。

Answer 2

あなたは、クリックイベントに.off求めているので。選択した要素のすべてのクリックイベントを削除しています。そのトリックは、ハンドラを定義し、特定のハンドラのみを削除することです。

function showPluto() { 
    showMsg("pluto"); 
}; 

function showPippo() { 
    showMsg("pippo"); 
}; 

function showMsg(text) { 
    alert("showMsg called with text: " + text); 
}; 

$('.pippo').on('click', showPippo); 
$('.pluto').on('click', showPluto); 

$('.dai').on('click', function() { 
    $('.pippo').off('click', showPippo); 
    alert("ok, removed"); 
}); 

Answer 3

OK、解決済み。私は、ドキュメントにハンドラをバインドする必要がありました：

function showMsg(text) { 
    alert("showMsg called with text: " + text); 
}; 

$(document).on('click', '.pippo', function() { 
    showMsg("pippo"); 
}); 


$(document).on('click', '.pluto', function() { 
    showMsg("pluto"); 
}); 

$('.dai').on('click', function() { 
    $(document).off('click', '.pippo'); 
    alert("ok, removed"); 
}); 

https://jsfiddle.net/6hm00xxv/1/

Answer 4

jQueryを使って一つ簡単に代替があなたのクリックイベントの名前空間を定義することです：

$('.pippo').on('click.first', ...); 
$('.pluto').on('click.second', ...); 

// Remove only the pippo listener 
$('.pippo').off('click.first'); 

注pippoあなたのクラスということと、 plutoは同じ要素を参照するため、どちらか一方を使用しても何も変更されません。

https://jsfiddle.net/6hm00xxv/2/