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

Best way to remove an event handler in jQuery?

提问by Randy L

I have an input type="image". This acts like the cell notes in Microsoft Excel. If someone enters a number into the text box that this input-imageis paired with, I setup an event handler for the input-image. Then when the user clicks the image, they get a little popup to add some notes to the data.

我有一个input type="image". 这就像 Microsoft Excel 中的单元格注释。如果有人在input-image与之配对的文本框中输入一个数字，我会为input-image. 然后，当用户单击 时image，他们会弹出一个小窗口，为数据添加一些注释。

My problem is that when a user enters a zero into the text box, I need to disable the input-image's event handler. I have tried the following, but to no avail.

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

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

回答by samjudson

jQuery ≥ 1.7

jQuery ≥ 1.7

With jQuery 1.7 onward the event API has been updated, .bind()/.unbind()are still available for backwards compatibility, but the preferred method is using the on()/off()functions. The below would now be,

从 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

jQuery < 1.7

In your example code you are simply adding another click event to the image, not overriding the previous one:

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

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

Both click events will then get fired.

这两个点击事件都会被触发。

As people have said you can use unbind to remove all click events:

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

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

If you want to add a single event and then remove it (without removing any others that might have been added) then you can use event namespacing:

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

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

and to remove just your event:

并仅删除您的活动：

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

回答by MacAnthony

This wasn't available when this question was answered, but you can also use the live()method to enable/disable events.

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

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

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

What will happen with this code is that when you click #mydisablebutton, it will add the class disabled to the #myimage element. This will make it so that the selector no longer matches the element and the event will not be fired until the 'disabled' class is removed making the .live() selector valid again.

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

This has other benefits by adding styling based on that class as well.

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

回答by ghayes

If you want to respond to an event just one time, the following syntax should be really helpful:

如果你想回应的事件只是一个时间，下面的语法应该是非常有帮助：

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

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

Using arguments.callee, we can ensure that the one specific anonymous-function handler is removed, and thus, have a single time handler for a given event. Hope this helps others.

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

回答by Mnebuerquo

This can be done by using the unbind function.

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

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

You can add multiple event handlers to the same object and event in jquery. This means adding a new one doesn't replace the old ones.

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

There are several strategies for changing event handlers, such as event namespaces. There are some pages about this in the online docs.

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

Look at this question (that's how I learned of unbind). There is some useful description of these strategies in the answers.

看看这个问题（这就是我如何了解解除绑定）。答案中有对这些策略的一些有用描述。

How to read bound hover callback functions in jquery

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

回答by John Boker

maybe the unbind method will work for you

也许 unbind 方法对你有用

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

回答by dwhittenburg

I had to set the event to null using the prop and the attr. I couldn't do it with one or the other. I also could not get .unbind to work. I am working on a TD element.

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

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

回答by dwhittenburg

If event is attached this way, and the target is to be unattached:

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

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

});?

回答by davaus

You may be adding the onclickhandler as inline markup:

您可能将onclick处理程序添加为内联标记：

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

If so, the jquery .off()or .unbind()won't work. You need to add the original event handler in jquery as well:

如果是这样，jquery.off()或.unbind()将不起作用。您还需要在 jquery 中添加原始事件处理程序：

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

Then the jquery has a reference to the event handler and can remove it:

然后 jquery 有一个对事件处理程序的引用并且可以删除它：

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

VoidKing mentions this a little more obliquely in a comment above.

VoidKing 在上面的评论中更间接地提到了这一点。

回答by alexpls

Updated for 2014

2014 年更新

Using the latest version of jQuery, you're now able to unbind all events on a namespace by simply doing $( "#foo" ).off( ".myNamespace" );

使用最新版本的 jQuery，您现在只需执行以下操作即可解除命名空间上的所有事件的绑定 $( "#foo" ).off( ".myNamespace" );

回答by Shahrukh Azeem

Best way to remove inline onclick event is $(element).prop('onclick', null);

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