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

我有一个input type="image" 。这就像 Microsoft Excel 中的单元格注释一样。如果有人在与该input-image配对的文本框中input-image ,我将为input-image设置一个事件处理程序。然后,当用户单击image ,他们会弹出一个弹出窗口以向数据添加一些注释。

我的问题是,当用户在文本框中输入零时,我需要禁用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

在示例代码中,您只是向图像添加了另一个 click 事件,而不是覆盖前一个事件:

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

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

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

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

如果要添加一个事件然后将其删除(而不删除可能已添加的其他事件),则可以使用事件命名空间:

$('#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 元素中。这样可以使选择器不再与该元素匹配,并且直到删除'disabled' 类使. live()选择器再次有效之前,该事件才会被触发。

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

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

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

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

有几种更改事件处理程序的策略,例如事件名称空间。联机文档中有一些与此有关的页面。

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

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

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

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

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

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

也许 unbind 方法将为您工作

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

我必须使用 prop 和 attr 将事件设置为 null。我不能用一个或另一个来做。我也无法解开工作。我正在研究 TD 元素。

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

如果 event 以这种方式附加,并且目标是未附加的:

$('#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处理程序添加为嵌入式标记:

<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 在上面的评论中更倾斜地提到了这一点。

2014 年更新

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

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

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

function executePageLock(){
    //do something
}