Question

我正在尝试删除一个jQuery事件，该事件的回调与this绑定。问题是.bind()每次都会创建一个新函数...所以当我尝试删除事件时，它在技术上不是同一个函数，所以它不起作用。

在这种情况下，我无法弄清楚如何在回调中保留正确的this：

class Controller {
    open() {
        $('body').on('click', this.handleClick.bind(this));
    }

    close() {
        $('body').off('click', this.handleClick.bind(this));
    }
}

Answer 1

您可以简单地使用jQuery名称空间：

class Controller {
    open() {
        $('body').on('click.myNamespace', this.handleClick.bind(this));
    }

    close() {
        $('body').off('click.myNamespace');
    }
}

Answer 2

在构造函数中执行一次绑定。

this

这样，您可以使用引用正确open()的绑定版本覆盖函数一次，然后在方法中附加/分离该函数。

以这种方式执行操作的另一个好处是绑定只执行一次，在实例化期间，然后对close()或this的任何调用将使用具有适当transform: [{ scale: 1.0 }],。

的相同功能

Answer 3

jQuery有自己的.bind polyfill。您可以使用$.proxy()来执行您想要的操作，因为它可以保留内部GUI。然后，您可以使用原始功能解除绑定。 jQuery足够聪明：

class Controller {
    open() {
        $('body').on('click', $.proxy(this.handleClick, this));
    }

    close() {
        $('body').off('click', this.handleClick);
    }
}

这是一篇展示它的文章：http://www.bennadel.com/blog/2001-using-jquery-s-proxy-method-in-event-binding-and-unbinding.htm

jQuery保留一个内部计数器来表示＆＃34; guid＆＃34; （全球唯一ID）。当一个函数通过proxy（）方法时，jQuery会生成一个新的guid值，然后将该guid应用于核心函数以及生成的代理函数。它这样做是为了你可以使用原始函数引用来取消绑定已被代理的事件处理程序回调 - 在unbind过程中jQuery使用guid来测试函数等价。

要了解它的实际效果，请探索这个小提琴：https://jsfiddle.net/Lfqq88uj/1/

删除绑定到处理程序的jQuery事件

3 个答案: