关于html输入：在jQuery中删除事件处理程序的最佳方法？

Best way to remove an event handler in jQuery?

我有一台input type="image"。这类似于Microsoft Excel中的单元格注释。如果有人在与此input-image配对的文本框中输入一个数字，我将为input-image设置一个事件处理程序。然后当用户单击image时，会弹出一个小窗口，向数据添加一些注释。

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

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

jQuery≥1.7

一个jQuery 1.7起事件API已经更新，.bind()/ .unbind()向后兼容性仍然是可用的，但首选的方法是使用on()/关()函数。下面是我们的现在，

1
2
3
4

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

在你的代码添加一个简单的例子，您需要点击事件的形象，以前的一overriding：

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

然后点击get是活动的。

有人说，你可以使用AS unbind删除所有click事件：

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

如果你想添加一个单一的事件，然后删除它(没有任何其他人可能已经删除，添加，然后你可以使用事件namespacing)：

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

和删除您的事件：

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

相关讨论

有没有办法测试unbind()是否有效？我已经添加了，两个事件仍在继续。
好吧，如果这两个事件仍然在发生，那么显然它不起作用。你必须提供更多的信息才能得到正确的答案。试着问一个单独的问题。
旧的答案——也像包含的名称空间信息——但是我忘记了；开/关是否返回JQ对象？如果是这样，也许更完整的答案是菊花链：$('#myimage').off('click').on('click',function(){...})。
是的，是的，所以是的，如果你想清除所有其他的点击事件，然后添加你自己的，你可以做上面的链接调用。
使用.unbind()帮助我在一种情况下切换了一堆复选框，但我重新添加了.click()处理程序，使应用程序挂起。
@参加迪生：你能解释一下为什么我们要用off而不是unbind吗？@他们提到了闭包编译器，但我不知道这意味着什么，也不知道这是否是正确的/唯一的原因。谢谢
我相信@theother在声明对bind()over click()的偏好，而不是bind()over on()。如前所述，自1.7以来，on/off已将bind/unbind替换为jquery中的首选方法。我不知道闭包编译器是什么，所以不能对此发表评论。
我刚从记录中删除了我的评论，那是三年前的事了。开/关是前进的道路。
这是一个hack:：：从元素中清除所有事件，不管它们是使用.on(..)还是甚至本地.onclick = 设置的---使用.cloneNode(true)克隆元素隐藏原始元素，在其前面插入复制的元素，之后可以选择删除原始元素。
@samjudson如果一个按钮有attrib onclick="return false;"，它的jquery click监听器仍在被激发，对吗？
removeattr("onclick")为我工作。
参见jwittenburg在下面的评论，re-dom对象具有内联onclick="doFoo"－使用.prop("onclick", null).attr("onclick", null)。
值得我投票！！！！
以前不知道jquery事件名称空间：api.jquery.com/event.namespace(相当薄的文档tbh)。但正是我需要的，允许将事件集作为一个组绑定/解除绑定。

这可不是什么这个问题时的回答，但你也可以使用Live()启用/禁用的同体的事件。

1
2
3

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

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

我想这是一个代码，当你点击它会添加# mydisablebutton，残疾人友好的一流#无关紧要的元素。这将使它这样的选择器匹配的元素不再和事件将不被开除，直到'禁用'类(删除).live作出有效的选择。

这有其他福利基于这类造型由添加为好。

相关讨论

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

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

你可以添加多个事件处理程序在同一个jQuery对象和事件。本均值添加一个新的取代旧的一。

有几个策略改变事件的事件处理程序，如命名空间。有一些关于这个网页的在线文档中。

看这个问题(这是我如何学会of unbind)。有一些有用的策略，在本文描述的答案。

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

如果你想使用一个事件只是一次，真的应该有以下的语法：

1
2
3
4
5

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

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

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

相关讨论

也许是你想unbind方法工作

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

我不得不设置到零的事件和属性的道具使用。我做的一个或另一个。所以不能.unbind I get to Work。我工作在TD元素。

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

相关讨论

如果事件是连接这种方式，和的目标是：unattached

1
2
3
4
5
6
7
8
9
10

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

});?

你可以添加一个内联onclick标记处理程序：

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

如果这样，.off().unbind()jQuery或不工作。你需要添加事件处理程序，在原有的jQuery的精髓：

1
2
3

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

jQuery参考的话，有一个事件处理程序和CAN删除它：

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

这一点obliquely voidking mentions a comment以上。

到2014年。

使用jQuery的最新版本，你现在可以在命名空间的所有事件unbind通过简单的做$("#foo" ).off(".myNamespace" );

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

谢谢你的信息。我过去很有帮助它锁定页面交互而在另一个用户在编辑模式。我用它在一个ajaxcomplete之间。不一样的行为，但在necesarily相似。

1
2
3
4
5
6
7
8
9
10

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

function executePageLock(){
//do something
}

对remove所有的event-handlers来说，这是对我有用的：

删除所有事件处理程序意味着让普通的HTML structure，而不将所有的event handlers连接到element及其child nodes。为了做到这一点，jQuery's clone()提供了帮助。

1
2
3
4
5
6

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，上面没有event-handlers。

祝你好运。。。

如果.on()方法以前用于特定的选择器，如下面的示例中所示：

1
2
3

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

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

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

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

相关讨论

因此，这个简单的和精细的作品。easy.see http：/ / / / / jsfiddle.net uzc8w 570

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

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

如果你设置它通过jQuery(如我的例子后，先点击上面的)然后你需要unbind($(this).unbind('click'))

我希望下面的解释了所有的代码。HTML：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

1
2
3
4
5

相关讨论

我知道这很晚才出现，但是为什么不使用普通JS来删除事件呢？

1 2	var myElement = document.getElementByID("your_ID"); myElement.onclick = null;

或者，如果将命名函数用作事件处理程序：

1
2
3
4

function eh(event){...}
var myElement = document.getElementByID("your_ID");
myElement.addEventListener("click",eh); // add event handler
myElement.removeEventListener("click",eh); //remove it

所有的方法中描述的没有工作，因为我为我的点击事件添加到文档在一个on()元素是在运行时创建的。

1
2
3

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

解决方案：
我

"我不.button unbind"我只是另一个类的类分配到一个按钮相同的CSS样式。因此，在做中学的生活/点击事件处理程序忽视的机会：

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

希望这帮助。