Enable / Disable DOM Element Events Using JS / jQuery

Question

I am stuck here with a small problem that I spent quite a bit of time in which is pretty poor compared to its functionality.

I have tags in the DOM, and I have associated several events with them using jQuery.

var a = $('<a>').click(data, function() { ... }) 

Sometimes I would like to disable some of these elements, which means that I add the 'disabled' CSS class to it, and I would like to delete all events, so no events will be fired anymore. I created a class called "Button" to solve this

 var button = new Button(a) button.disable() 

I can remove all events from jQuery object using $ .unbind. But I would also like to have the opposite function

 button.enable() 

which binds all events to all handlers back to the element OR maybe there is a function in jQuery that actually knows how to do this ?!

The My Button class looks something like this:

 Button = function(obj) { this.element = obj this.events = null this.enable = function() { this.element.removeClass('disabled') obj.data('events', this.events) return this } this.disable = function() { this.element.addClass('disabled') this.events = obj.data('events') return this } } 

Any ideas? Especially this repeat function should be available after disconnecting → enable

 var a = $('<a>').click(data, function() { ... }) 

I found these sources that did not work for me: http://jquery-howto.blogspot.com/2008/12/how-to-disableenable-element-with.html

http://forum.jquery.com/topic/jquery-temporarily-disabling-events -> I do not set events in the button class

Appreciate your help.

Answer 1

 $("a").click(function(event) { event.preventDefault(); event.stopPropagation(); return false; }); 

Returning false is very important.

Or you can write your own on and off functions that do something like:

 function enable(element, event, eventHandler) { if(element.data()[event].eventHandler && !eventHandler) { //this is pseudo code to check for null and undefined, you should also perform type checking element.bind(event, element.data()[event]); } else (!element.data()[event] && eventHandler) { element.bind(event, element.data()[event]); element.data({event: eventHandler}); //We save the event handler for future enable() calls } } function disable(element, event) { element.unbind().die(); } 

This is not perfect code, but I'm sure you get the main idea. Restore the old event handler from the DOM element data when you call enable. The downside is that you will need to use enable () to add an event listener that can be disabled () d. Otherwise, the event handler will not be stored in the DOM data and cannot be restored using enable () again. There is currently no reliable way to get a list of all event listeners on an element; this would make work easier.

Answer 2

I would use this with a different approach:

 <a id="link1">Test function</a> <a id="link2">Disable/enable function</a> <script type="text/javascript"> $(function() { // this needs to be placed before function you want to control with disabled flag $("#link1").click(function(event) { console.log("Fired event 1"); if ($(this).hasClass('disabled')) { event.stopImmediatePropagation(); } }); $("#link1").click(function() { console.log("Fired event 2"); }); $("#link2").click(function() { $("#link1").toggleClass("disabled"); }); }); </script> 

Perhaps this is not what you need, as it may affect other functions attached to this event later. An alternative would be to modify the functions themselves to be more similar:

 $("#link1").click(function(event) { console.log("Fired event 1"); if ($(this).hasClass('disabled')) { return; } // do something here }); 

if this is an option.

Answer 3

Instead of adding an event handler to each element separately, you should use event delegation. This would create a much more manageable structure.

• http://www.sitepoint.com/javascript-event-delegation-is-easier-than-you-think/
• http://cherny.com/webdev/70/javascript-event-delegation-and-event-hanlders
• http://brandonaaron.net/blog/2010/03/4/event-delegation-with-jquery

That is why you can simply check the class on a click element and act accordingly. And you can even reuse them, jsut, by changing the tag classes.

PS read the links carefully so that later you can explain it to others. Event delegation is a very important method.

Answer 4

You can use <input type="button"> and then use $("#buttonID").addAttr('disabled', 'disabled'); and $("#buttonID").removeAttr('disabled'); . Disabling and enabling will be performed by the browser. You can still use it as an anchor if you need it by removing the backgrounds and borders for the button. Keep in mind that some margins and padding may still get confused in some browsers.