Question

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);    
        
}

Answer 1

To remove the event just use .off()

el.off('click');

To add the event back you can just do

el.on('click',callback);