Jquery And Hide A Div On A Click

i have a little problem with JQuery. Well, i have a and i want to hide this div when an user click in a zone that is not in the like the 'notifications' behavior in facebook. The

Solution 1:

Assuming:

<div class="notification">You have 3new messages</div>

use:

$(document).click(function(evt) {
  if ($(this).closest("div.notification").length == 0) {
    $("div.notification").fadeOut();
  }
});

Basically this listens to all clicks. If one is received that doesn't occur inside a notification div it fades them out.

Solution 2:

Thank you for your answer but, the :

$(this).closest("div.notification").length == 0) 

always return me 0 (even if i click in the div), so the div is always hidden.

This is my code :

$(document).click(function(evt) {
        if ($(this).closest("div#show_notif").length==0)
            $("div#show_notif").fadeOut();
});

And the html :

<div id="click_show_notif" onclick="$('div#show_notif').show();"><img src="http://'+STATIC_SERVER+'/images/notif.png" /><div id="show_notif"></div>

There is something that i forgot ?

Solution 3:

Try this :

$("#click_show_notif").live('click',function(e) {
    $("#show_notif").show();
    returnfalse;
});

$('body').live('click',function(e) {
    if ($(this).closest("div#show_notif").length==0) {
        $("div#show_notif").hide();
    }
});