Question

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

但是当我在.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();
    });
})

在.click（）函数中使用.live（'click'）会触发自身

4 个答案: