jQueryでイベントハンドラーを削除する最良の方法は?

Question

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

私の問題は、ユーザーがテキストボックスにゼロを入力したときに、 input-imageのイベントハンドラ。以下のことを試してみましたが、効果がありませんでした。

$('#myimage').click(function { return false; });

Answer 1

jQuery <！>＃8805; 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 <！> lt; 1.7

サンプルコードでは、画像に別のクリックイベントを追加するだけで、前のイベントを上書きしません：

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

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

ユーザーが言ったように、バインド解除を使用してすべてのクリックイベントを削除できます。

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

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

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

そしてあなたのイベントだけを削除するには：

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

Answer 2

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

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

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

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

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

Answer 3

これは、バインド解除機能を使用して実行できます。

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

jqueryの同じオブジェクトとイベントに複数のイベントハンドラーを追加できます。つまり、新しいものを追加しても古いものは置き換えられません。

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

この質問を見てください（バインド解除について学んだ方法です）。回答には、これらの戦略の有用な説明があります。

jqueryでバインドされたホバーコールバック関数を読み取る方法

Answer 4

イベントに一度だけ応答する場合は、次の構文が非常に役立ちます。

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

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

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

Answer 5

おそらくバインド解除方法があなたのために動作します

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

Answer 6

propとattrを使用してイベントをnullに設定する必要がありました。どちらでもできませんでした。また、.unbindを動作させることができませんでした。 TD要素に取り組んでいます。

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

Answer 7

イベントがこの方法で添付され、ターゲットが添付解除される場合：

$('#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.

});​

Answer 8

インラインマークアップとして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は、上記のコメントでこれをもう少し斜めに言及しています。

Answer 9

2014年に更新

jQueryの最新バージョンを使用すると、$( "#foo" ).off( ".myNamespace" );

を実行するだけで、ネームスペース上のすべてのイベントのバインドを解除できます。

Answer 10

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

です

Answer 11

情報のおかげで。非常に役に立ちました。別のユーザーが編集モードにあるときにページのインタラクションをロックするために使用しました。ajaxComplete と組み合わせて使用​​しました。必ずしも同じ動作ではありませんが、ある程度似ています。

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

function executePageLock(){
    //do something
}

Answer 12

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

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

unbind()と.off()の両方のメソッドは動作しません 。

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

$("body").undelegate(".dynamicTarget", "click")

Answer 13

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

すべてのイベントハンドラーを削除するということは、HTML structureとそのevent handlersにすべてのelementが付加されていない、プレーンな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の代わりに<=>が表示されます。

幸運...

Answer 14

これも正常に動作します。シンプルで簡単です。 http://jsfiddle.net/uZc8w/570/

$('#myimage').removeAttr("click");

Answer 15

onclickをhtml経由で設定する場合、removeAttr ($(this).removeAttr('onclick'))

にする必要があります

jqueryで設定した場合（上記の例の最初のクリック後）、unbind($(this).unbind('click'))

する必要があります

Answer 16

実行時に要素が作成されたドキュメントにon()のクリックイベントを追加していたため、説明したすべてのアプローチが機能しませんでした：

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

回避策：

<！> quot; .button <！> quotのバインドを解除できなかったため、 class同じCSSスタイルを持つボタンに別のクラスを割り当てました。そうすることで、ライブ/イベントハンドラーは最終的にクリックを無視しました：

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

役立つこと。

Answer 17

以下のコードですべてを説明してください。 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>

Answer 18

これが遅くなることは知っていますが、イベントを削除するのにプレーン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

Answer 19

$(document).on()を使用して動的に作成された要素にリスナーを追加する場合、次を使用して削除する必要がある場合があります。

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

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