jquery - 删除 jQuery 小部件的一个实例的事件处理程序

Question

我使用 jQuery UI 小部件工厂(在 Typescript 中)编写了一个小部件。

我的小部件监听窗口元素上的滚动事件，因此在 _create 函数中添加了一个事件处理程序:

_create = function () {
   $(window).on("scroll", this.handleScroll);
}

在 _destroy 函数中我想删除处理程序:

_destroy = function () {
   $(window).off("scroll", this.handleScroll);
}

但是，我的页面上可以有此小部件的两个实例:一个在常规页面中，一个在弹出窗口中。我当前的实现删除了两个实例的处理程序，这显然是不需要的。

我读过这个问题:Recommended way to remove events on destroy with jQuery UI Widget Factory ，那里接受的答案适用于自定义事件，但我看不到像 scroll 这样的标准事件的解决方案。

任何想法表示赞赏。

Answer 1

该解决方案也适合您。如果您还没有它们，请将 ID 分配给您的两个小部件 - 在页面上和弹出窗口中。然后，像这样修改您的代码:

_create = function () {
   $(window).on("scroll." + this.id, this.handleScroll);
}

_destroy = function () {
   $(window).off("scroll." + this.id, this.handleScroll);
}

请注意“.”在调用 on() 和 off() 滚动之后。请参阅这篇文章:Namespaced events in jquery 和 this one 。