如何从 javascript 小部件中删除所有 jquery 实时事件

Question

我正在开发一些可以在许多其他网站上加载的 javascript 小部件。

当小部件加载时，我在链接和按钮上绑定 jquery 实时事件。 例如：

$('.my-submit').live('click', function() {...});
...
$('.my-link').live('click', function() {...});

所以问题是如何仅删除小部件链接和按钮的所有实时事件？

Answer 1

执行此操作的简单方法是与命名空间绑定，并删除所有命名空间事件：

$('.my-submit').live('click.myPlugin', function() {...});

然后您可以调用 die 与命名空间：

$('.my-submit').die('click.myPlugin'); // only myPlugin events are removed

更好的是使用 on 和 off jQuery 1.7 中引入的功能。这是处理绑定和解除绑定事件的一种更好的方法：

$(document).on('click.myPlugin', '.my-submit', function() {...}))
           .on('click.myPlugin', '.my-link', function() {...}));

$(document).off('click.myPlugin'); // remove all myPlugin functions

Answer 2

从 jQuery 1.7 开始，.live() 方法已被弃用。使用 .on() 附加事件处理程序。旧版本 jQuery 的用户应优先使用 .delegate() 而不是 .live()。

参考 jQuery 本身：

从 jQuery

使用 on 或 delegate，这不是问题。

Answer 3

您想使用 .die()：

从之前使用 .live() 附加的所有事件处理程序中删除
元素。

来源：http://api.jquery.com/die/

旁注，您应该从使用 .live() 转向 .delegate() （或 .on() 取决于您的版本jQuery），因为它会提高性能，并且 .live() 是从 jQuery 1.7 开始已弃用。

$(<selector>).live(<event>, <handler>);

与以下内容相同：

$(document).delegate(<selector>, <event>, <handler>);

使用 .delegate() 的好处是您可以选择根元素（不必强制使用 document）。

给你的一些文档：

• .die(): http://api.jquery.com/ die
• .delegate(): http://api.jquery.com/委托

Answer 4

您可以尝试 JQuery.unbind() 方法。您可以像这样使用它：

$.('.my-link').unbind('click');

希望这会有所帮助。