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

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

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

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

samjudson.. 1600

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

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

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

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

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

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

并删除您的活动:

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

好吧,如果两个事件仍在解雇,那么显然它不起作用.您必须提供更多信息才能获得正确答案.试着问一个单独的问题. (19认同)

旧答案 - 也就像包含的命名空间信息一样 - 但我忘了; on/off返回jQ对象？如果是这样,或许更完整的答案将是菊花链:`$('#myimage').off('click').on('click',function(){...})` (13认同)

有没有办法测试`unbind()`是否有效？我添加了它,两个事件仍然在发射. (5认同)

是的,他们这样做,所以是的,如果您想要清除所有其他点击事件然后添加自己的事件,您可以进行上述链接调用. (3认同)

removeAttr（'onclick'）为我工作。 (3认同)

---

MacAnthony.. 63

当回答此问题时,这不可用,但您也可以使用live()方法启用/禁用事件.

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

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

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

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

1> samjudson..：

---

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

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

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

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

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

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

并删除您的活动:

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

---

好吧,如果两个事件仍在解雇,那么显然它不起作用.您必须提供更多信息才能获得正确答案.试着问一个单独的问题.

---

旧答案 - 也就像包含的命名空间信息一样 - 但我忘了; on/off返回jQ对象？如果是这样,或许更完整的答案将是菊花链:`$('#myimage').off('click').on('click',function(){...})`

---

有没有办法测试`unbind()`是否有效？我添加了它,两个事件仍然在发射.

---

是的,他们这样做,所以是的,如果您想要清除所有其他点击事件然后添加自己的事件,您可以进行上述链接调用.

---

removeAttr（'onclick'）为我工作。

2> MacAnthony..：

---

当回答此问题时,这不可用,但您也可以使用live()方法启用/禁用事件.

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

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

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

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

---

啊,变幻无常的jQuery,有一天你带300代表给一个人,第二天它已经过时了.

---

"从jQuery 1.7开始,不推荐使用.live()方法.使用.on()来附加事件处理程序.旧版jQuery的用户应优先使用.delegate(),而不是.live()." http://api.jquery.com/live/

---

很好的方式使用`live()`,从来没有想过以这种方式使用它...除了编码方便,它更快还是它提供使用bind/unbind的任何其他优点？

---

要禁用live,你可以使用die()

---

如果要添加/删除元素，则与bind相比，它具有明显的性能优势，因为与live的绑定仅执行一次。jQuery似乎正在转移到更多活动和委托事件，而不是绑定到特定元素。

3> Mnebuerquo..：

---

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

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

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

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

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

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

4> ghayes..：

---

如果你想响应事件只是一次,下面的语法应该是非常有帮助:

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

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

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

---

为此,jQuery已经有了`jQuery#one('click',fn)`.

---

arguments.callee在严格模式下被删除!

---

当然,尽管有时您可能希望对处理程序何时应该解除绑定有一定的逻辑(例如,除非他们首先提交文本框,否则不要解除绑定).

5> John Boker..：

---

也许unbind方法适合你

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

6> dwhittenburg..：

---

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

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

---

我认为上述方法对你们不起作用的原因是因为你如何设置它.如果您将事件处理程序写入DOM然后是,清除此属性对于清除事件处理程序是必要的,但是,我认为大多数人(包括我自己)希望保留这些内容(javascrip,事件处理程序等). DOM,所以当我们想要设置一个事件处理程序时,我们使用类似`$("#elementId")的东西.单击(function(){//事件执行代码到这里});`以便它不在html中一页.要清楚我们确实需要使用`.unbind()`,或者首选`.off()`

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.

});?

8> davaus..：

---

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

如果是这样,jquery .off()或.unbind()将无法正常工作.您还需要在jquery中添加原始事件处理程序:

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

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

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

VoidKing在上面的评论中更倾向于提到这一点.

9> alexpls..：

---

更新于2014年

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

10> 小智..：

---

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

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

function executePageLock(){
    //do something
}

11> 小智..：

---

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

12> Akash..：

---

对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它.

祝好运...

13> Ilia Rostovt..：

---

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

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

这两个unbind()和.off()方法都没有去上班。

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

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