jQuery：取消绑定事件处理程序以稍后再次绑定它们答案

【问题标题】：jQuery: Unbind event handlers to bind them again laterjQuery：取消绑定事件处理程序以稍后再次绑定它们
【发布时间】：2010-10-05 16:49:19
【问题描述】：

有谁知道如何解除绑定事件处理程序集，但记住它们以便以后再次绑定它们？有什么建议吗？

【问题讨论】：

你们的事件有相同的处理函数吗？或完全不同。
应该不是问题。让我们假装他们都是不同的，我不知道他们是什么

标签： javascript jquery events

【解决方案1】：

为了取消绑定事件处理程序，您需要将处理程序函数传递给 unbind()。所以你已经有了handler函数，你所要做的就是记住它。

【讨论】：

我想如果你不传递特定的处理函数，取消绑定适用于该对象的所有事件？
@Helmut yes unbind 如果您在不带参数的情况下调用它，将取消绑定所有处理程序。除非您保留对它们的引用，否则以后将无法再次绑定它们。您还可以取消绑定您不知道的事件 - 例如被另一个脚本绑定。最好使用特定的处理程序调用 unbind，以便您可以确定。

【解决方案2】：

项目的数据中有一个事件元素。这应该让您开始，您可以在解除绑定之前读取您的元素并将处理程序存储在一个数组中。如果您需要更多帮助，请发表评论。我从阅读 $.fn.clone 方法中得到了这个想法，所以也看看它。

$(document).ready(function() {
    $('#test').click(function(e) {
        alert('test');
        var events = $('#test').data("events");
        $('#test').unbind('click', events.click[0]);
    });
});

<a id="test">test</a>

【讨论】：

我也在寻找这个问题的解决方案，这个答案非常有效。为了更通用，您可以通过迭代器访问 events.click。
在 jQuery 1.4.2 中，他们改变了事件的存储方式，所以这不起作用：blog.jquery.com/2010/02/19/jquery-142-released。我不确定你需要做什么。
要处理 1.4.2 后的绑定，请参阅下面有关命名空间事件的帖子。

【解决方案3】：

有一个名为Copy Events 的jQuery 插件，它将事件从一个对象复制到另一个对象。这可以很容易地用于从一个元素“保存”事件并稍后将它们带回来。再多一个选择:)

编辑：修复断开的链接

【讨论】：

【解决方案4】：

这里是如何实现的，提供了一个storeEvents 和一个restoreEvents 方法。 storeEvents 在它被调用的那一刻拍摄事件的快照。 restoreEvents 恢复到上一个快照。可能需要稍微扭曲一下以在恢复时参数化取消绑定，也许您希望在最后一个快照之后保留绑定事件。

(function($){

    function obj_copy(obj){
            var out = {};
        for (i in obj) {
            if (typeof obj[i] == 'object') {
                out[i] = this.copy(obj[i]);
            }
            else
                out[i] = obj[i];
        }
        return out;
    }


    $.fn.extend({

        storeEvents:function(){
            this.each(function(){
                $.data(this,'storedEvents',obj_copy($(this).data('events')));
            });
            return this;
        },

        restoreEvents:function(){
            this.each(function(){
                var events = $.data(this,'storedEvents');
                if (events){
                    $(this).unbind();
                    for (var type in events){
                        for (var handler in events[type]){
                            $.event.add(
                                this, 
                                type, 
                                events[type][handler], 
                                events[type][handler].data);
                        }
                    }
                }
            });
            return this;
        }

    });
})(jQuery);

【讨论】：

【解决方案5】：

由于 jQuery 1.4.2+ 改变了事件处理程序的存储方式，这似乎是相关的：

我发现最好的方法是使用事件命名空间：

var ary_handlers = [ fn_highlight, fn_onpress, fn_cleanup ];
for ( idx = 0; idx < ary_handlers.length; idx++ ){
  $('#test').bind('click.foobar',ary_handlers[idx]);
}

// and then later: 
$('#test').unbind('.foobar');

在上面的例子中，所有的 foobar 事件都未绑定。请注意，如果您需要更精细的控制，您可以命名每个点击处理程序并关联到您的处理程序数组：

var ary_handlers = [ fn_highlight, fn_onpress, fn_cleanup ];
for ( idx = 0; idx < ary_handlers.length; idx++ ){
  $('#test').bind('click.ns_' + String(idx), ary_handlers[idx]);
}

// and then later you could pick off a specific one to unbind
$('#test').unbind('.ns_2');

【讨论】：

【解决方案6】：

Nick Craver 似乎拥有 jQuery 1.4.2+ 的 correct answer。他还包括一个有用的fiddle。他的解决方案允许您检索附加到 jQuery 元素的所有事件处理程序，并找出它们附加到哪个处理程序。

【讨论】：

投反对票的人应提供他们投反对票的原因。帮助人们学习并提供一些责任感……有时反对者是错误的。每个人都可以学习。

【解决方案7】：

您可以使用 event.handler 参数：

$(document).ready(function() {
    $('#test').click(function(e) {
        e.preventDefault();
        alert('test');
        $('#test').unbind('click', e.handler);
        //Do Something...
        $('#test').click();
    });
});

<a id="test">test</a>

event.handler 返回当前接收到事件的处理程序，因此省略它可以保留其他处理程序。

【讨论】：