为什么这个on（）会立即触发而不是仅仅绑定？

Question

Im在.on()和如何使用它，而不是.bind()在这种情况下有一些问题。 即时尝试在这里做什么是我点击一个链接，这是supose绑定另一个点击事件，而是它立即触发该事件。我查看了文档/ jquery.js文件，这就是我想如何做的。

演示：http://jsfiddle.net/bNaFV/

$('#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(); 
     } 
    } 
); 



<a href="#" id="click_me">click me</a><br /><br /> 

<div id="show_me"></div>​ 

Answer 1

你需要停止事件的传播：

$('#click_me').on('click', function(e){  
    e.stopPropagation(); //Stop the event from bubbling further 
    $('#show_me').addClass('remain'); 
    $(document).on('click', 'html', function(){ 
     $('#show_me').hide();   
    }); 
}); 

这是因为该事件已在#click_me元素被抓获。然后，绑定DOM树上某个相同事件类型的事件处理程序。然后该事件继续冒泡树并达到document，在那里触发新的事件处理程序。

这是working example。

更新（见注释）

正如在评论中指出@zerkms，我想你可能只需要到事件处理程序绑定到document一次。你可以使用one方法这样做，这解除绑定事件处理程序，它已经执行后一次：

$(document).one('click', 'html', function(){ 
    $('#show_me').hide();   
});