jquery document body one click event

Question

Hello,

Could somebody help me with this? :

I have a button that when clicked it shows a certain div. This div has several descendants. Now, what I want is that when I click somewhere else in the document, but not in any of those descendants that this div disappears. what I thought was to use the not selector like this:

$("#button").click(function(){
    $("#mydiv").show();
    $(document.body).not($("#mydiv").children()).one('click',function(e) {
        $("#mydiv").hide(); 
    });
        return false;   
});

but this is not working! Any idea why? thanks

Answer 1

Use closest to check if the target is a descendant of mydiv.

$("#button").click(function(){
    $("#mydiv").show();
    $(document.body).click(function() {
        if ($(event.target).closest("#mydiv").length == 0)
            $("#mydiv").hide();     
    });
    return false;   
});

You can't use one() because the event would get removed if you click inside mydiv. You'll have to do some custom event unbinding if you want to remove it.

Answer 2

The problem might be with what you are passing in to the .not() to exclude

.not($("#mydiv").children())

At the moment you are passing a jQuery object in, but from the docs, what is passed into .not() should be either a string selector, a DOM element or an array of DOM elements. Therefore simply converting the jQuery object to an array of elements should work

$("#button").click(function(){
    var myDiv = $("#mydiv").show();
    $(document.body).not(myDiv.children().get()).one('click',function(e) {
        myDiv.hide();     
    });
        return false;   
});

Answer 3

How about checking the click event to see what was clicked? Specifically look at the event.target.

$(document).click(function(event) {
  var target = $(event.target);

  if (!target.attr('id').match(/^mydiv/) && target.parents('#mydiv').length == 0) {
    $('#mydiv').hide();
  }
});

I have used this code before to close an open window when someone clicks anywhere but the window.