Question

我在使用.on()时遇到了一些问题，以及在这种情况下如何使用它代替.bind()。我试图在这里做的是点击一个链接，这是为了绑定另一个点击事件，但它会立即触发该事件。我查看了documentation / 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();        
});

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

1 个答案: