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

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

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

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

此代码将发生的情况是，当您单击 #mydisablebutton 时，它会将已禁用的类添加到 #myimage 元素中。这将使选择器不再与元素匹配，并且在删除“禁用”类使 .live() 选择器再次有效之前不会触发事件。

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

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

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

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

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

看看这个问题（这就是我了解 unbind 的方式）。答案中有对这些策略的一些有用描述。

How to read bound hover callback functions in jquery

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

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

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

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

也许 unbind 方法对你有用

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

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

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

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

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

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

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

$('#myimage').removeAttr("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 handler
myElement.removeEventListener("click",eh); //remove it

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

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

所描述的所有方法都对我不起作用，因为我将带有 on() 的点击事件添加到在运行时创建元素的文档中：

$(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");

希望有帮助。

希望我下面的代码能解释一切。 HTML：

(function($){ $("#btn_add").on("click",function(){ $("#btn_click").on("click", added_handler); alert("向按钮 1 添加了新的处理程序"); }); $("#btn_remove").on("click",function(){ $("#btn_click").off("click", added_handler); alert("删除按钮 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); 按钮1 添加处理程序 删除处理程序 固定处理程序