1

我有一些问题.on()以及如何使用它而不是.bind()在这种情况下。我在这里尝试做的是我单击一个链接，这应该绑定另一个单击事件，但它会立即触发该事件。我查看了文档/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>​
4

1 回答 1

8

您需要停止事件的传播：

$('#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，在那里它触发新的事件处理程序。

这是一个工作示例。

更新（见评论）

正如@zerkms 在评论中指出的那样，我认为您可能只想将事件处理程序绑定document一次。您可以使用该one方法来执行此操作，该方法在事件处理程序执行一次后解除绑定：

$(document).one('click', 'html', function(){
    $('#show_me').hide();        
});
于 2012-05-18T07:09:35.543 回答