title: Assigning a click-event-handler inside a click-event
body: <p>I have encountered some strange behavior when dealing with click-events in jQuery.</p>
  
  <p>Have a look at <a href="http://jsfiddle.net/7ymJX/" rel="noreferrer">this Fiddle</a></p>
  
  <pre><code>$('#button').click(function() {
      $(document).one('click', function() {
          alert('clicked');
      });
  });
  </code></pre>
  
  <p>This code is binding a click-event-handler to some button. On clicking this link, an event-handler should be added to the document, alerting "clicked" when the document is next clicked.</p>
  
  <p>But when clicking this button, "clicked" gets immediately alerted without another click. So apparently the click-event which binds the new handler to the document gets bubbled to the document and immediately runs the just assigned hndler.</p>
  
  <p>This behavior seems very counter-intuitive. My intention was showing an element when clicking on the button and hiding it again on clicking outside this element.</p>
  
  <pre><code>$('#button').click(function() {
      // Show some element
  
      $(document).one('click', function() {
          // Hide the element again
      });
  });
  </code></pre>
  
  <p>But this results in the element being hidden immediately.</p>
  
  <p>Does anyone have a solution to this problem?</p>