web-dev-qa-db-ja.com

JQueryでイベントハンドラを削除する最良の方法は？

私はinput type="image"を持っています。これは、Microsoft Excelのセルノートのように機能します。誰かがこのinput-imageとペアになっている番号をテキストボックスに入力した場合、私はinput-imageのためのイベントハンドラを設定します。次に、ユーザーがimageをクリックすると、データにメモを追加するための小さなポップアップが表示されます。

私の問題は、ユーザーがテキストボックスにゼロを入力したとき、私はinput-imageのイベントハンドラを無効にする必要があるということです。私は以下を試しましたが、役に立ちませんでした。

$('#myimage').click(function { return false; });
jqueryhtml-input
1011
the0ther

jQuery≧1.7

JQuery 1.7以降ではイベントAPIが更新されました。下位互換性のために.bind()/.unbind()がまだ利用可能ですが、推奨される方法は on（） / off（） 関数を使用することです。以下は今でしょう、

$('#myimage').click(function() { return false; }); // Adds another click event
$('#myimage').off('click');
$('#myimage').on('click.mynamespace', function() { /* Do stuff */ });
$('#myimage').off('click.mynamespace');

jQuery <1.7

サンプルコードでは、前のイベントをオーバーライドするのではなく、単にクリックイベントを画像に追加するだけです。

$('#myimage').click(function() { return false; }); // Adds another click event

両方のクリックイベントが発生します。

人々が言っ​​たようにあなたはすべてのクリックイベントを削除するためにunbindを使うことができます：

$('#myimage').unbind('click');

単一のイベントを追加してから削除する（追加された可能性のある他のイベントを削除せずに）場合は、イベントの名前空間を使用できます。

$('#myimage').bind('click.mynamespace', function() { /* Do stuff */ });

自分の予定だけを削除するには：

$('#myimage').unbind('click.mynamespace');
1551
samjudson

この質問に答えたときには利用できませんでしたが、 live（） メソッドを使ってイベントを有効/無効にすることもできます。

$('#myimage:not(.disabled)').live('click', myclickevent);

$('#mydisablebutton').click( function () { $('#myimage').addClass('disabled'); });

このコードで起こることはあなたが#mydisablebuttonをクリックするとき、それは無効にされたクラスを#myimage要素に追加するということです。これにより、セレクタは要素と一致しなくなり、 'disabled'クラスが削除されて.live（）セレクタが再度有効になるまでイベントは発生しません。

これには、そのクラスに基づいてスタイルを追加することによるその他の利点があります。

60
MacAnthony

これはunbind関数を使って行うことができます。

$('#myimage').unbind('click');

Jqueryの同じオブジェクトとイベントに複数のイベントハンドラを追加できます。これは、新しいものを追加しても古いものが置き換えられないことを意味します。

イベントの名前空間など、イベントハンドラを変更するための戦略はいくつかあります。これに関するいくつかのページがオンラインドキュメントにあります。

この質問を見てください（それが私がアンバインドを知った方法です）。答えにこれらの戦略のいくつかの有用な説明があります。

jqueryでバウンドホバーコールバック関数を読む方法

37
Mnebuerquo

イベントたった1回に応答したい場合は、次の構文が非常に役立ちます。

 $('.myLink').bind('click', function() {
   //do some things

   $(this).unbind('click', arguments.callee); //unbind *just this handler*
 });

arguments.callee​​ _を使用することで、特定の無名関数ハンドラを確実に削除することができます。したがって、特定のイベントに対して単一の時間ハンドラを使用することができます。これが他の人に役立つことを願っています。

34
ghayes

多分unbindメソッドはあなたのために働くでしょう

$("#myimage").unbind("click");
30
John Boker

Propとattrを使ってイベントをnullに設定しなければなりませんでした。どちらにもできませんでした。私は.unbindを動かすこともできませんでした。私はTD要素に取り組んでいます。

.prop("onclick", null).attr("onclick", null)
29
dwhittenburg

イベントが添付されている場合 このように で、ターゲットは接続されていません。

$('#container').on('click','span',function(eo){
    alert(1);

    $(this).off(); //seams easy, but does not work

    $('#container').off('click','span'); //clears click event for every span

    $(this).on("click",function(){return false;}); //this works.

});​
11
user669677

インラインマークアップとしてonclickハンドラを追加することができます。

<input id="addreport" type="button" value="Add New Report" onclick="openAdd()" />

もしそうなら、jquery .off()または.unbind()は機能しません。 jqueryにもオリジナルのイベントハンドラを追加する必要があります。

$("#addreport").on("click", "", function (e) {
   openAdd();
});

その後、jqueryはイベントハンドラへの参照を持ち、それを削除することができます。

$("#addreport").off("click")

VoidKingはこれをもう少し斜めに上のコメントで述べています。

10
davaus

2014用に更新

最新バージョンのjQueryを使用すると、$( "#foo" ).off( ".myNamespace" );を実行するだけで名前空間のすべてのイベントをバインド解除できます。

9
alexpls

インラインonclickイベントを削除する最善の方法は$(element).prop('onclick', null);です

7
Shahrukh Azeem

情報のおかげで。非常に便利私は編集モードで他のユーザーがページのインタラクションをロックするのに使っていました。私はajaxCompleteと一緒にそれを使用しました。必ずしも同じ動作ではありませんが、多少似ています。

function userPageLock(){
    $("body").bind("ajaxComplete.lockpage", function(){
        $("body").unbind("ajaxComplete.lockpage");
        executePageLock();      
    });
};  

function executePageLock(){
    //do something
}
6
jquery_user

remove _ all _ event-handlersにとって、これは私にとってうまくいったことです：

すべてのイベントハンドラを削除するということは、すべてのHTML structureをelementとそのevent handlersに結び付けずに、単純なchild nodesを持つことを意味します。これを行うために、jQuery's clone()が役に立ちました。

var original, clone;
// element with id my-div and its child nodes have some event-handlers
original = $('#my-div');
clone = original.clone();
//
original.replaceWith(clone);

これで、cloneの代わりにoriginalがあり、event-handlersはありません。

がんばろう...

5
Akash

次の例のように、.on()メソッドが以前に特定のセレクタで使用された場合

$('body').on('click', '.dynamicTarget', function () {
    // Code goes here
});

unbind()メソッドと.off()メソッド はどちらも ではありません。

ただし、 .undelegate（） メソッドを使用して、現在のセレクタに一致するすべての要素のイベントからハンドラを完全に削除できます。

$("body").undelegate(".dynamicTarget", "click")
5
Ilia Rostovtsev

これもうまく動作します。簡単で簡単。 http://jsfiddle.net/uZc8w/570/

$('#myimage').removeAttr("click");
3
Somnath Kharat

onclickを介してhtmlを設定する場合は、removeAttr ($(this).removeAttr('onclick'))を実行する必要があります。

jqueryで設定した場合（上の例では最初のクリックの後のように）、unbind($(this).unbind('click'))を実行する必要があります。

2
Ishan Liyanage

私はこれが遅くなったことを知っていますが、なぜイベントを削除するためにプレーンなJSを使わないのですか？

var myElement = document.getElementByID("your_ID");
myElement.onclick = null;

あるいは、イベントハンドラとして名前付き関数を使用するならば：

function eh(event){...}
var myElement = document.getElementByID("your_ID");
myElement.addEventListener("click",eh); // add event handler
myElement.removeEventListener("click",eh); //remove it
1
Silviu Preda

私の下のコードがすべてを説明することを願っています。 HTML：

(function($){

     $("#btn_add").on("click",function(){
       $("#btn_click").on("click",added_handler);
       alert("Added new handler to button 1");
     });

  
 
     $("#btn_remove").on("click",function(){
       $("#btn_click").off("click",added_handler);
       alert("Removed new handler to button 1");
     });

  
   function fixed_handler(){
    alert("Fixed handler");
  }
  
   function added_handler(){
    alert("new handler");
  }
  
  $("#btn_click").on("click",fixed_handler);
  $("#btn_fixed").on("click",fixed_handler);
  
  
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn_click">Button 1</button>
  <button id="btn_add">Add Handler</button>
  <button id="btn_remove">Remove Handler</button>
  <button id="btn_fixed">Fixed Handler</button>
1
mysticmo

実行時に要素が作成されたドキュメントにon()付きのclickイベントを追加していたので、説明したすべてのアプローチは私にはうまくいきませんでした。

$(document).on("click", ".button", function() {
    doSomething();
});


私の回避策：

".button"クラスをアンバインドできなかったので、同じCSSスタイルを持つボタンに別のクラスを割り当てました。そうすることで、live/on-event-handlerは最後にクリックを無視しました：

// prevent another click on the button by assigning another class
$(".button").attr("class","buttonOff");

それが役立つことを願っています。

0
Kai Noack

動的に作成された要素にリスナを追加するために$(document).on()を使用するなら、それを削除するために以下を使用しなければならないかもしれません：

// add the listener
$(document).on('click','.element',function(){
    // stuff
});

// remove the listener
$(document).off("click", ".element");
0
ow3n