jquery document body one click event

Question

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

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.