Using .live('click') inside a .click() function triggers itself

Question

I'm trying to add a $('body').live('click') listener after the user clicks on a div. The purpose is creating a custom dropdown box that the user can open and eventually close by clicking anywhere on the page.

But when I add .live() or .bind() function inside a .click() function, the live() function is triggered for some reason:

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

#myDiv is shown but immediately hides, evidenced by the lingering .showing class.

Am I using live() wrong? How do I avoid this recursion?

Answer 1

return false will stop event propagation:

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

Answer 2

Maybe it should work, maybe it shouldn't. But it doesn't. I'd recommend setting up all your event handlers at the beginning, and just have a global variable (e.g.) that tracks whether or not the second event handler should actually respond or not.

Answer 3

Use second body click binding without live (also you don't need it, because it always on page) and use timeout:

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

});

Answer 4

You probably have to stop propagation of the current event to keep it from bubbling up to the body where your new event handler will see it. Further, you can use .one() for a one time event handler:

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