title: How to re-bind an unbound link/object
body: <p>By pressing the first button, you will animate the <code>margin-left</code> of the second one, by pressing the second one, you unbind the click event from the first one, but I want lets say a third button to bind the click event back to the first one.</p>
  
  <p>Looking for a simple solution of course!</p>
  
  <p>This is what the code looks like:</p>
  
  <pre><code>&lt;div class="button"&gt;&lt;a href="http://www.google.com"&gt;something&lt;/a&gt;&lt;/div&gt;
  &lt;div class="button2"&gt;&lt;a href="http://www.google.com"&gt;something2&lt;/a&gt;&lt;/div&gt;
  &lt;div class="button3"&gt;&lt;a href="http://www.google.com"&gt;something3&lt;/a&gt;&lt;/div&gt;
  
  ​(function(){
      $('.button a').on('click', function(e){
           e.preventDefault();
          $('.button2').animate({'margin-left': '+=2'}, 100);       
      })
  
      $('.button2').on('click', function(e){
           e.preventDefault();
           $('.button a').unbind('click');       
      })
  
      $('.button3').on('click', function(e){
           e.preventDefault();
           $('.button a').bind('click');       
      })
  
  })();​
  </code></pre>
  
  <p>and you can mess around with it <a href="http://jsfiddle.net/Amsjn/" rel="nofollow">here</a></p>