如何将事件处理程序存储在变量中，并在以后将其绑定到对象

Question

基本上我有一个按钮"删除选定项"，只要未选中任何复选框，它就会被禁用。一旦用户选中复选框，我想将单击事件处理程序绑定到此按钮。

由于用户取消选中复选框而未选中任何复选框的情况，因此我想将完整的事件处理程序函数存储在变量中，并且仅在选中复选框后立即绑定它。

问题是：如何将此事件处理程序函数存储在变量中以最轻松地将其绑定到对象？

到目前为止，我只使用它来解绑一个事件处理程序（该处理程序已存在于此对象上），然后再次绑定它，如下所示：

$(my-selector).unbind('click', eventHandler);
$(my-selector).bind('click', eventHandler);

。但绝非相反。

Answer 1

我的建议是走一条不同的路线：绑定事件并将它们绑定到页面的整个生命周期。在事件处理程序中，检查相关对象的状态并决定如何处理事件 - 这可能包括简单地忽略它。

这背后有两个理由：

• 保持简单和可调试
• 我看到事件的交付延迟了很长时间，以至于事件开始时的状态不再与事件交付时的状态相同：即：您的事件在您取消绑定后被交付（因为它是在绑定时启动的）

Answer 2

我不确定我是否理解，但你的意思是这样吗？

// eventHandler function
var eventHandler = function(event) {
   ... // do something
}
// bind eventHandler function to jQuery collection
$(my-selector).bind('click', eventHandler);
$(my-selector).unbind('click', eventHandler);

Answer 3

var handlerFunc = function () {...}
$(my-selector).unbind('click', handlerFunc);
$(my-selector).bind('click', handlerFunc);

Answer 4

您可以使用变量来存储选中的复选框，如下所示：

var checkboxHandler = {}
checkboxHandler.activateButton = function(){...};
checkboxHandler.deactivateButton = function(){...};
checkboxHandler.checkboxes_checked = {};
checkboxHandler.number_of_checked_checkboxes = 0;
checkboxHandler.checkboxClicked = function(event){
    if($(this).attr('checked')){
        var id = $(this).attr('id');
        if(checkboxHandler.checkboxes_checked[id]){
            // uncheck
            checkboxHandler.checkboxes_checked[id] = false;
            checkboxHandler.number_of_checked_checkboxes--;
        }else{
            // checked
            checkboxHandler.checkboxes_checked[id] = true;
            checkboxHandler.number_of_checked_checkboxes++;
        }
        if(checkboxHandler.number_of_checked_checkboxes>0){
            checkboxHandler.activateButton();
        }else{
            checkboxHandler.deactivateButton();
        }
    }
}
$('checkboxes').bind('click',checkboxHandler.checkboxClicked)

这样，您只需绑定一次复选框，而不必绑定/取消绑定它们