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

Question

我有一个输入类型=“图像”。 这就像 Microsoft Excel 中的单元格注释。 如果有人在与此 input-image 配对的文本框中输入数字，我会为 input-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 < 1.7

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

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

然后两个单击事件都会被触发。

正如人们所说，您可以使用取消绑定来删除所有点击事件：

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

这可以通过使用取消绑定功能来完成。

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

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

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

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

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

Answer 4

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

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

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

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

Answer 5

也许解除绑定方法适合你

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

要删除全部事件处理程序，这对我有用：

删除所有事件处理程序意味着拥有简单的HTML结构 没有附加到元素及其子节点的所有事件处理程序。 为此，jQuery 的 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);

这样，我们将用克隆来代替原始，并且上面没有事件处理程序。

祝你好运...

Answer 9

如果您使用 $(document).on() 向动态创建的元素添加侦听器，那么您可能必须使用以下命令将其删除：

// add the listener
$(document).on('click','.element',function(){
    // stuff
});

// remove the listener
$(document).off("click", ".element");

Answer 10

您可能将 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 11

2014 年更新

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

Answer 12

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

Answer 13

感谢您的信息。 非常有用，我用它来锁定其他用户在编辑模式下的页面交互。 我将它与 ajaxComplete 结合使用。 行为不一定相同，但有些相似。

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

function executePageLock(){
    //do something
}

Answer 14

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

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

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

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

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

Answer 15

我知道这来得很晚，但为什么不使用纯 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 16

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

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

Answer 17

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

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

Answer 18

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

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

我的解决方法：

因为我不能取消绑定“.button”类 我刚刚为具有相同 CSS 样式的按钮分配了另一个类。 通过这样做，实时/事件处理程序最终忽略了点击：

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

希望有帮助。

Answer 19

希望我的下面的代码解释了一切。
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>

Answer 20

我今天在工作中遇到了一个与此相关的有趣案例，其中有一个 $(window) 的滚动事件处理程序。

// TO ELIMINATE THE RE-SELECTION AND 
//   RE-CREATION OF THE SAME OBJECT REDUNDANTLY IN THE FOLLOWING SNIPPETS
let $window = $(window);

$window.on('scroll', function() { .... });

但是，要撤销该事件处理程序，我们不能只使用它，

$window.off('scroll');

因为在这个非常常见的目标上可能还有其他滚动事件处理程序，而且我对通过关闭所有功能来管理其他功能（已知或未知）不感兴趣。滚动处理程序。

我的解决方案是首先将处理程序功能抽象为命名函数，然后在事件侦听器设置中使用它。

function handleScrollingForXYZ() { ...... }

$window.on('scroll', handleScrollingForXYZ);

然后，有条件地，当我们需要撤销它时，我这样做了：

$window.off('scroll', $window, handleScrollingForXYZ);

卡顿部分是第二个参数，它冗余地选择原始选择器。 但是， .off() 的 jquery 文档仅提供了一种方法签名，用于指定要删除的处理程序，这要求这个中间参数是

一个选择器，应与附加事件处理程序时最初传递给 .on() 的选择器相匹配。

我还没有冒险使用 null 或 '' 作为第二个参数来测试它，但也许冗余的 $window 不是必要的。