title: How remove onClick, and then add it again later?
body: <p>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.</p>
  <p>My first two attempts failed miserably, the <code>callback </code> methods just got stacked and instead of running it once after each click the method was running more and more times.</p>
  <pre><code>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);            
  }
  </code></pre>
  <p>Then i tried using the el.data:</p>
  <pre><code>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') == &quot;true&quot;)
              return;
          console.log(&quot;setOpacity&quot;);   
          el.css('opacity','1');
          el.data('element-enabled','true');
          el.click(function(){
              if(el.data('element-enabled') == &quot;true&quot;)
                  callback();
          }); 
              
      }
  </code></pre>
  <p>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.</p>
  <p>Can achieve that somehow?</p>
  <p><strong>UPDATE</strong></p>
  <p>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!</p>
  <pre><code>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);    
          
  }
  </code></pre>