Enable/Disable button click handlers in Javascript

Question

Ok, let's say that I have a button and I would like to enable/disable its click handlers.

I would like to create functions like these:

var bar = [];
function storeHandlers(buttonID) {
    //I would like to store the click handlers in bar[buttonID]
}

function preventHandlers(buttonID) {
    storeHandlers(buttonID);
    //I would like to disable all the click handlers for button
}

function loadHandlers(buttonID) {
    //I would like to enable all the handlers loaded from bar[buttonID]
}

Is this possible? How can I achieve this?

Thank you in advance

Answer 1

As far as I know you can't store/retrieve the event handlers from just the ID of the elements, you have store those manually while creating handlers. But you can on/off handlers like following

function preventHandlers(buttonID) {
    $('#'+buttonID).off('click',bar[buttonID]);
}

function loadHandlers(buttonID) {
   $('#'+buttonID).on('click',bar[buttonID]);
}

And you can store them like

bar[buttonID] = function(event){

};

UPDATE:

Though the answers here at How to debug JavaScript/jQuery event bindings with Firebug (or similar tool) and here How to find event listeners on a DOM node when debugging or from the JavaScript code? and others are saying that .date('events') returns all event handlers, i could not get it to work.

I have set up an example with the way stated above. Chek the following link

Working Fiddle