在jQuery中删除事件处理程序的最佳方法？

我有一个input type="image" 。这就像Microsoft Excel中的单元格注释一样。如果有人在与该input-image配对的文本框中input-image ，我将为input-image设置一个事件处理程序。然后，当用户单击image ，他们会弹出一个弹出窗口以向数据添加一些注释。

我的问题是，当用户在文本框中输入零时，我需要禁用input-image的事件处理程序。我尝试了以下方法，但无济于事。

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

#1楼

如果event以这种方式附加，并且目标是未附加的：

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

#2楼

回答此问题时该功能不可用，但是您也可以使用live（）方法启用/禁用事件。

$('#myimage:not(.disabled)').live('click', myclickevent);$('#mydisablebutton').click( function () { $('#myimage').addClass('disabled'); });

此代码将发生的事情是，当您单击#mydisablebutton时，它将把禁用的类添加到#myimage元素中。这样可以使选择器不再与该元素匹配，并且直到删除'disabled'类使.live（）选择器再次有效之前，该事件才会被触发。

通过添加基于该类的样式，这还有其他好处。

#3楼

这也很好用。简单易用。请参阅http://jsfiddle.net/uZc8w/570/

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

#4楼

也许unbind方法将为您工作

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

#5楼

这可以通过使用unbind函数来完成。

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

您可以将多个事件处理程序添加到jquery中的同一对象和事件。这意味着添加新的不能替代旧的。

有几种更改事件处理程序的策略，例如事件名称空间。联机文档中有一些与此有关的页面。

看一下这个问题（这就是我学会解除绑定的方式）。答案中对这些策略有一些有用的描述。

如何在jQuery中读取绑定的悬停回调函数

#6楼

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

在示例代码中，您只是向图像添加了另一个click事件，而不是覆盖前一个事件：

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

然后，两个点击事件都会被触发。

正如人们所说，您可以使用unbind删除所有点击事件：

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

如果要添加一个事件然后将其删除（而不删除可能已添加的其他事件），则可以使用事件命名空间：

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

并删除您的事件：

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

#7楼

您可能将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在上面的评论中更倾斜地提到了这一点。

#8楼

2014年更新

使用最新版本的jQuery，您现在可以通过简单地执行$( "#foo" ).off( ".myNamespace" );来解除绑定命名空间上的所有事件$( "#foo" ).off( ".myNamespace" );

#9楼

所描述的所有方法都不适合我，因为我将带有on()的click事件添加到了在运行时创建元素的文档中：

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

我的解决方法：

因为我无法解除对“ .button”类的绑定，所以我只为另一个具有相同CSS样式的类分配了一个类。这样，活动/事件处理程序最终忽略了点击：

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

希望能有所帮助。

#10楼

如果您通过html设置onclick ，则需要removeAttr ($(this).removeAttr('onclick'))

如果您通过jquery进行设置（如上述示例中第一次单击后的设置），则需要unbind($(this).unbind('click'))

#11楼

删除内联onclick事件的最佳方法是$(element).prop('onclick', null);

#12楼

谢谢提供信息。非常有用，我用它来锁定另一用户在编辑模式下的页面交互。我将其与ajaxComplete结合使用。不一定是相同的行为，但有些相似。

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

#13楼

希望我下面的代码能解释所有问题。 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>

#14楼

如果.on()方法先前与特定选择器一起使用，如以下示例所示：

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

unbind()和.off()方法都不起作用。

但是，对于与当前选择器匹配的所有元素， .undelegate（）方法可用于从事件中完全删除处理程序：

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

#15楼

我知道这很晚，但是为什么不使用纯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

#16楼

要remove 所有 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的clone ，上面没有event-handlers 。

祝好运...

#17楼

如果使用$(document).on()向动态创建的元素添加侦听器，则可能必须使用以下命令将其删除：

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

#18楼

如果你想响应事件只是一次 ，下面的语法应该是非常有帮助：

 $('.myLink').bind('click', function() {//do some things$(this).unbind('click', arguments.callee); //unbind *just this handler*});

使用arguments.callee ，我们可以确保删除一个特定的匿名函数处理程序，从而为给定事件使用单个时间处理程序。希望这对其他人有帮助。

#19楼

我必须使用prop和attr将事件设置为null。我不能用一个或另一个来做。我也无法解开工作。我正在研究TD元素。

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