如何仅删除实例中添加的事件处理程序？答案

【问题标题】：How to remove only events handlers added in the instance?如何仅删除实例中添加的事件处理程序？
【发布时间】：2014-09-21 03:23:55
【问题描述】：

我有一个 jQuery 插件，它在某些元素上附加事件处理程序。

在插件的销毁方法中，我希望删除这些事件处理程序，但只删除由该插件实例添加的那些。

如果我这样做 .off('.myPlugin'); 它可能会删除由其他插件实例添加的事件处理程序，我不希望这样做。

我问的有可能吗？

【问题讨论】：

你能跟踪你绑定的事件吗？
你的意思是把事件处理函数存储在一个数组中还是什么的？是的。我如何将它传递给 off() ？
@thelolcat 循环遍历数组并调用.off("eventName", eventHandler)

标签： javascript jquery object jquery-plugins jquery-events

【解决方案1】：

jQuery 具有事件命名空间，可以用于此目的。

您为添加的事件命名，因此可以在不删除其他事件处理程序的情况下删除它们，因此在插件中您将添加所有这样的事件处理程序

$( "p" ).on( 'click.pluginName', function(event) {
    // do stuff on click
});

当您想要删除该点击处理程序时，并且只删除该点击处理程序，而不是其他点击处理程序，您可以这样做

$( "p" ).off( 'click.pluginName');

这通常是在插件中完成的。

文档：jQuery event.namespace

如果您需要识别插件的每个实例，您可以使用标志、计数器或其他任何东西。
像这样的东西会起作用

$.fn.plugin = function() {
    var self  = this,
        count = $.fn.plugin.counter++;

    $(this).on('click.pluginName' + count, function() {
        // do stuff on click
    });

    this.destroy = function() {
        self.off('click.pluginName' + count)
    }

}

$.fn.plugin.counter = 0;

或其他变体

$.fn.plugin = function(arg) {
    if (arg == 'destroy') {

        var count = $(this).data('count');
        $(this).off('click.pluginName' + count);

    }else{

        var count = $.fn.plugin.counter++;

        $(this).data('count', count).on('click.pluginName' + count, function() {
            alert('clicked')
        });
    }

    return this;
}

$.fn.plugin.counter = 0;

FIDDLE

【讨论】：

我正在使用命名空间，但所有实例都有相同的命名空间：|

【解决方案2】：

我能想到的唯一方法是为该插件的每个实例生成一个 GUID，然后在绑定和取消绑定事件时将其连接到您的插件名称。

【讨论】：