I need a method to enable and disable any element. Disable meaning set the opacity to 0.6 and remove the onClick callbacks. Enable meaning set the opacity to 1 and add the callback again.

My first two attempts failed miserably, the callback methods just got stacked and instead of running it once after each click the method was running more and more times.

function disableElement(element){
    var el = $('#'+element); 
    el.css('opacity','0.6');
    el.on('click',null);     //this doesn't work
            el.removeAttr('onClick'); // this doesn't help either.

}

function enableElement(element,callback){
    var el = $('#'+element); 
    el.css('opacity','1');
    el.on('click',callback);            
}

Then i tried using the el.data:

disableElement:function(element){
        var el = $('#'+element); 
        el.css('opacity','0.6');
        el.data('element-enabled','false');
        //el.click(function (){
        //  alert('disabled');
        //});           
    },
    
    enableElement:function(element,callback){
        console.log('enabling');
        var el = $('#'+element);
        console.log(el);
        if(el.data('element-enabled') == "true")
            return;
        console.log("setOpacity");   
        el.css('opacity','1');
        el.data('element-enabled','true');
        el.click(function(){
            if(el.data('element-enabled') == "true")
                callback();
        }); 
            
    }

Now they don't stack, as long as I don't disable it. If I disable and then enable it again, it gets stacked. Which means, if i run enableElement multiple times the callbacks don't stack. But once I run disableElement and then enableElement, if i click in the item, it'll happen twice.

Can achieve that somehow?

UPDATE

That was close. The off worked for me but i also had to remove it on the enableElement. Occasionally I have to call it twice, so it was still stacking. Finally this worked, thank you!

disableElement:function(element){
    var el = $('#'+element); 
    el.css('opacity','0.6');        
    el.off('click');

},

enableElement:function(element,callback){       
    var el = $('#'+element);
    el.off('click');                    
    el.css('opacity','1');      
    el.on('click',callback);    
        
}

I need a method to enable and disable any element. Disable meaning set the opacity to 0.6 and remove the onClick callbacks. Enable meaning set the opacity to 1 and add the callback again.

My first two attempts failed miserably, the callback methods just got stacked and instead of running it once after each click the method was running more and more times.

function disableElement(element){
    var el = $('#'+element); 
    el.css('opacity','0.6');
    el.on('click',null);     //this doesn't work
            el.removeAttr('onClick'); // this doesn't help either.

}

function enableElement(element,callback){
    var el = $('#'+element); 
    el.css('opacity','1');
    el.on('click',callback);            
}

Then i tried using the el.data:

disableElement:function(element){
        var el = $('#'+element); 
        el.css('opacity','0.6');
        el.data('element-enabled','false');
        //el.click(function (){
        //  alert('disabled');
        //});           
    },
    
    enableElement:function(element,callback){
        console.log('enabling');
        var el = $('#'+element);
        console.log(el);
        if(el.data('element-enabled') == "true")
            return;
        console.log("setOpacity");   
        el.css('opacity','1');
        el.data('element-enabled','true');
        el.click(function(){
            if(el.data('element-enabled') == "true")
                callback();
        }); 
            
    }

Now they don't stack, as long as I don't disable it. If I disable and then enable it again, it gets stacked. Which means, if i run enableElement multiple times the callbacks don't stack. But once I run disableElement and then enableElement, if i click in the item, it'll happen twice.

Can achieve that somehow?

UPDATE

That was close. The off worked for me but i also had to remove it on the enableElement. Occasionally I have to call it twice, so it was still stacking. Finally this worked, thank you!

disableElement:function(element){
    var el = $('#'+element); 
    el.css('opacity','0.6');        
    el.off('click');

},

enableElement:function(element,callback){       
    var el = $('#'+element);
    el.off('click');                    
    el.css('opacity','1');      
    el.on('click',callback);    
        
}

• javascript
• jquery
• html

• You can use the .off() method to unbind the event handler. api.jquery./off – Jay Blanchard Commented Dec 14, 2012 at 17:06

3 Answers 3

To remove the event just use .off()

el.off('click');

To add the event back you can just do

el.on('click',callback);  

You need to use .off as in .off('click'). That will remove all bound events of the click type. Documentation for .off

Note that if you use .off it doesn't return the event or anything, and you can't simply rebind with .on. However, since you have defined the callback in a separate function, you're good to go since you do re-bind as .on('click', function_name). It's just something to be aware of.

Unbind will remove all handlers assigned to the object for some event:

$('#foo').unbind('click');

You can also set this to some specific function by adding it as a second argument

$('#foo').unbind('click', myfunctionname);