why does this on() trigger right away instead of just binding?
<p>Im having some problems with <code>.on()</code> and how to use it instead of <code>.bind()</code> in this situation. 
What im trying to do here is i click a link and that is supose to bind another click event, but instead it triggers that event right away. I looked in the documentation/jquery.js file and this is how im suppose to do it.</p>

<p><strong>Demo:</strong> <a href="http://jsfiddle.net/bNaFV/" rel="nofollow">http://jsfiddle.net/bNaFV/</a></p>

<pre><code>$('#click_me').on('click', function(){    
    $('#show_me').addClass('remain');

    //this is only suppose to bind that next time i click anywhere on the document it should hide
    // not right away
    $(document).on('click', 'html', function(){
      $('#show_me').hide();        
    });
});

$("#click_me").hover(
  function () {
    $('#show_me').show();
  }, 
  function () {
      if ($('#show_me').hasClass('remain')){
           return;   
      } else {
          $('#show_me').hide();   
      }
  }
);



&lt;a href="#" id="click_me"&gt;click me&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;

&lt;div id="show_me"&gt;&lt;/div&gt;​
</code></pre>
