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

我有一个input type="image" 。 这就像Microsoft Excel中的单元格笔记一样。 如果有人在input-image配对的文本框中input-image ,我为input-image设置了一个事件处理程序。 然后,当用户点击image ,他们会popup一个小小的图标,为数据添加一些注释。

我的问题是,当用户input一个零到文本框中,我需要禁用input-image的事件处理程序。 我尝试了以下,但无济于事。

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

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 

这两个点击事件将被解雇。

正如人们所说,你可以使用解除绑定来删除所有的点击事件:

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

如果你想添加一个事件,然后将其删除(不删除可能已经添加的其他事件),那么你可以使用event namespacing:

 $('#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元素中。 这将使select器不再匹配元素,事件将不会被触发,直到“禁用”类被移除,再次使.live()select器有效。

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

这可以通过使用解除绑定function来完成。

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

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

有几种更改事件处理程序的策略,比如事件名称空间。 在线文档中有一些关于此的网页。

看看这个问题(我是如何学会解绑的)。 答案中对这些策略有一些有用的描述。

如何阅读jQuery中的绑定hovercallback函数

如果你只想回应一个事件,下面的语法应该是非常有用的:

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

使用arguments.callee ,我们可以确保一个特定的匿名函数处理程序被移除,因此,对于一个给定的事件有一个单独的时间处理程序。 希望这可以帮助别人。

也许解除绑定的方法将为你工作

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

我必须使用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. });​ 

2014年更新

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

您可能将onclick处理程序添加为内嵌标记:

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

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

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

然后,jquery有一个事件处理程序的引用,可以删除它:

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

VoidKing在上面的评论中更加倾斜地提到了这一点。

感谢您的信息。 非常有帮助,我用它来locking页面交互,而在另一个用户的编辑模式。 我与ajaxComplete一起使用它。 不是相同的行为,但有点相似。

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

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

这也工作正常。简单和容易。请参阅http://jsfiddle.net/uZc8w/570/

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

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

如果你通过jquery设置它(就像上面的例子中的第一次点击),那么你需要unbind($(this).unbind('click'))

如果.on()方法以前与特定的select器一起使用,如下例所示:

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

unbind().off()方法都不能工作。

但是,可以使用.undelegate()方法为与当前select器匹配的所有元素从事件中完全移除处理程序:

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

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

我知道这是晚了,但为什么不使用普通的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 

所有描述的方法都不适用于我,因为我将on()的click事件添加到在运行时创build元素的文档中:

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

我的解决方法:

由于我无法解除绑定“.button”类,我只是将另一个类分配给具有相同CSS样式的button。 通过这样做,live / on-event-handler最终忽略了click:

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

希望有所帮助。