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

You can namespace your event handlers and enable/disable groups of handlers that way. — Ja͢ck, Jun 22 '12 at 07:52

score 2 · Answer 1 · edited May 23 '17 at 12:12

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

+1 If I can disable them and enable them without storing them that's very nice, I didn't even dare to hope this is possible. — Lajos Arpad, Jun 21 '12 at 15:47

Baris Akar · Accepted Answer · 2012-06-22T07:48:02.880

1

Just try this:

function preventClick(buttonID) {
    $('#'+buttonID).data('events').saved_click = $('#'+buttonID).data('events').click;
    $('#'+buttonID).data('events').click = null;
}

function allowClick(buttonID) {
    $('#'+buttonID).data('events').click = $('#'+buttonID).data('events').saved_click;
}

That's it!

jsFiddle example: http://jsfiddle.net/cec6z/9/

edited Jun 22 '12 at 07:48

answered Jun 21 '12 at 15:50

Baris Akar

4,895
1
26
54

This looks like a nice solution. – Lajos Arpad Jun 21 '12 at 15:51

score 0 · Answer 3 · edited Jun 21 '12 at 15:46

0

Maybe I'm wrong but I don't think you can retrieve all event callbacks from a jquery object such like

var handlers = $('#buttonId').unbind('click')

edited Jun 21 '12 at 15:46

Christoph

50,121
21
99
128

answered Jun 21 '12 at 15:44

laurentdev

1

Enable/Disable button click handlers in Javascript

3 Answers3