jquery - 在 .click() 函数中使用 .live('click') 会触发自身

Question

我正在尝试$('body').live('click')在用户单击 div 后添加一个侦听器。目的是创建一个自定义下拉框，用户可以通过单击页面上的任意位置来打开和最终关闭该下拉框。

但是当我在函数内部添加.live()或函数时，由于某种原因会触发该函数：.bind().click()live()

$('#myDiv').click(function(){
    $('#myDiv .child').show().addClass('showing');
    $('body').live('click', function(){
           $('#myDiv .child').hide();
           $('body').die();
    })
})

#myDiv.showing显示但立即隐藏，挥之不去的班级证明了这一点。

我用live()错了吗？如何避免这种递归？

Answer 1

return false将停止事件传播：

    $('#myDiv').click(function(){
    $('#myDiv .child').show().addClass('showing');
    $('body').live('click', function(){
           $('#myDiv .child').hide();
           $('body').die();
    });
    return false;
})

Answer 2

使用没有实时的第二个正文点击绑定（你也不需要它，因为它总是在页面上）并使用超时：

$('#myDiv').on('click',function(){
    $('#myDiv .child').show().addClass('showing');
setTimeout(function(){
$('body').on('click', function(){
           $('#myDiv .child').hide();
           $('body').off('click');
    });
},0);

});

Answer 3

也许它应该起作用，也许它不应该。但事实并非如此。我建议在开始时设置所有事件处理程序，并且只使用一个全局变量（例如）来跟踪第二个事件处理程序是否应该实际响应。

Answer 4

您可能必须停止当前事件的传播，以防止它冒泡到您的新事件处理程序将看到它的主体。此外，您可以使用.one()一次性事件处理程序：

$('#myDiv').on('click',function(e){
    $('#myDiv .child').show().addClass('showing');
    e.stopPropagation();
    $(document.body).one('click', function() {
           $('#myDiv .child').hide();
    });
})