Question

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

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

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

Answer 1

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

Answer 2

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

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

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

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

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

Answer 3

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

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

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

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

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

How to read bound hover callback functions in jquery

Answer 4

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

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

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

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

Answer 5

也许unbind方法适合你

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

Answer 6

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

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

Answer 7

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

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

});

Answer 8

您可能会将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在上面的评论中更倾向于提到这一点。

Answer 9

2014年更新

使用最新版本的jQuery，您现在只需执行$( "#foo" ).off( ".myNamespace" );

就可以取消绑定命名空间中的所有事件

Answer 10

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

Answer 11

感谢您提供的信息。非常有帮助我用它在另一个用户的编辑模式下锁定页面交互。我将它与ajaxComplete结合使用。不一定是相同的行为，但有点类似。

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

function executePageLock(){
    //do something
}

Answer 12

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

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

unbind()和.off()方法都无法正常工作。

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

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

Answer 13

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

有了这个，我们将clone取代original，而不会event-handlers。

祝你好运......

Answer 14

这也很好。简单易用。见http://jsfiddle.net/uZc8w/570/

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

Answer 15

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

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

Answer 16

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 17

我知道这是迟到的，但为什么不使用普通的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

Answer 18

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

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

希望有所帮助。

Answer 19

如果您使用1 0 Invalid Power Setting向动态创建的元素添加侦听器，则可能必须使用以下命令将其删除：

$(document).on()

Answer 20

只需将其从按钮中删除：

$('.classname').click(function(){
$( ".classname" ).remove();
});

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

20 个答案:

jQuery≥1.7

jQuery＆lt; 1.7