Question

基本上我有一个“删除所选项”按钮，只要没有选中复选框就会被禁用。一旦用户选中了复选框，我就想将click事件处理程序绑定到此按钮。

由于用户可能会取消选中复选框并且没有选中，我想将完整的事件处理函数存储在变量中，并且只在选中复选框后立即绑定它。

问题是：如何将这个事件处理函数存储在一个变量中，以便最容易地将它绑定到一个对象？

直到现在我只使用它来取消绑定事件处理程序（已存在于此对象上）然后再次绑定它，如下所示：

$(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)

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

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

4 个答案: