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

小开

也许解绑方法对你有用

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

小开

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

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

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

有几种更改事件处理程序的策略，例如事件命名空间。在线文档中有一些关于此的页面。

看看这个问题（这就是我如何学习unbind的）。答案中对这些策略有一些有用的描述。

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

小开

最佳答案

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');

小开

回答此问题时，此选项不可用，但您也可以使用#0方法启用/禁用事件。

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

这段代码会发生什么，当你单击#mydisablebutton时，它会将禁用的类添加到#myimage元素中。这将使选择器不再匹配该元素，并且在删除禁用类之前不会触发事件，从而使.live()选择器再次有效。

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

小开

谢谢你的信息。非常有帮助，我用它来锁定页面交互，而在编辑模式下由另一个用户。我用它与ajax完成。不一定相同的行为，但有些相似。

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

小开

如果您想响应事件就一次，以下语法应该非常有用：

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

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

小开

我必须使用prop和attr将事件设置为null。我不能用一个或另一个来做。我也无法让. unbind工作。我正在处理一个TD元素。

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

小开

如果事件被附加这种方式，并且目标将被取消附加：

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

小开

这也很好。简单easy.seehttp://jsfiddle.net/uZc8w/570/

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

小开

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

小开

2014年更新

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

小开

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

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

我的解决方法：

由于我无法取消绑定“.按钮”类，我只是将另一个类分配给具有相同CSS样式的按钮。通过这样做，live/on-Event-handler最终忽略了单击：

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

希望有帮助。

小开

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

如果您通过jQuery设置它（如上面示例中第一次单击之后），那么您需要unbind($(this).unbind('click'))

小开

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

小开

希望下面的代码能解释一切。超文本标记语言：

(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>

小开

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

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

unbind()和.off()方法不是都可以工作。

但是，取消委托方法可用于从事件中完全删除与当前选择器匹配的所有元素的处理程序：

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

小开

我知道这很晚才出现，但为什么不使用普通的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 handlermyElement.removeEventListener("click",eh); //remove it

小开

对于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-handlersoriginal = $('#my-div');clone = original.clone();//original.replaceWith(clone);

有了这个，我们将用clone代替original，上面没有event-handlers。

祝你好运…

小开

如果您使用$(document).on()将侦听器添加到动态创建的元素，那么您可能必须使用以下方法来删除它：

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