CODEWITHSUNDEEP
javascriptjqueryeventsevent-handlingjquery-events
Chris
Chris

Reputation: 3846

How to store an event-handler in a variable and bind it to an object later?

Basically I have a button Delete Selected, which is disabled as long as no checkboxes are selected. As soon as the user checks a checkbox, I'd like to bind a click event-handler to this button.

As it can happen that the user deselects the checkboxes and none is selected, I wanted to store the complete event-handler function in a variable and only bind it as soon as checkboxes are checked.

The question is: how can I store this event-handler function in a variable to most easily bind it to an object?

Till now I only used this to unbind an event-handler (that already existed on this object) and then bind it again, like this:

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

...but never the other way round.

Upvotes: 3

Views: 8168

Answers (4)

Eugen Rieck
Eugen Rieck

Reputation: 65342

My suggestion is to go a different route: Bind the events and leave them bound for the complete lifecycle of the page. In the event handler, check for the state of the relevant objects and decide what to do with the event - this might include simply ignoring it.

There are two rationales behind that:

  • Keep it simple and debugable
  • I have seen delivery of an event delayed so long, that the state at the initiation of the event was no longer the same as on event delivery: i.e.: Your event is delivered, after you have unbound it (as it was initiated while still bound)

Upvotes: 5

cuzzea
cuzzea

Reputation: 1535

you can use a variable to store what checkboxes are selected, something like this:

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)

this way you only bind the checkboxes once and you don't have to bind/unbind them

Upvotes: 0

d.k
d.k

Reputation: 4470

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

Upvotes: 0

Marcel Kalveram
Marcel Kalveram

Reputation: 1305

I'm not sure if I understand, but do you mean something like this?

// eventHandler function
var eventHandler = function(event) {

   ... // do something

}

// bind eventHandler function to jQuery collection
$(my-selector).bind('click', eventHandler);
$(my-selector).unbind('click', eventHandler);

Upvotes: 4

Related Questions