jquery document body one click event

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 worki开发者_如何学运维ng! Any idea why? thanks

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.

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.

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;   
});