jQuery - click (almost!) anywhere to hide div

I have a search input box that appears upon rollover of a button. Rather than having its own close button I would like to be able to click anywhere on the page to re-hi开发者_JS百科de the Search.

If I attach a click handler to the document this works fine but the problem being is that the search itself is part oofthe document. So if you click the input (which of course you need to do in order to type in a search) the search disappers.

I had hoped I'd be able to write a function soemthing like this...

$(document).not("#search").click(function(){ 
 $('#search_holder').fadeOut('fast'); 
});

i.e apply a click handler to the entire document APART from the search. Unfortunately that doesn't work.

so whats the answer?

thanking You in advance

Cancel the click event from propagating when it originates from the button you care about:

$("#search").click(function(event){ 
    event.stopPropagation();
});

You can do it by stopping the click event from bubbling, like this:

$(document).click(function() { 
  $('#search_holder').fadeOut('fast'); 
});
$("#search").click(function(e) {
  e.stopPropagation();
});

event.stopPropagation() prevents the bubble from going any higher, all the way to document triggering the .fadeOut(), everywhere else (by default) will bubble to document, causing the fade to occur.

Try this Its working perfect for me.

$(document).mouseup(function (e)
{
    var searchcontainer = $("#search_container");

    if (!searchcontainer.is(e.target) // if the target of the click isn't the container...
        && searchcontainer.has(e.target).length === 0) // ... nor a descendant of the container
    {
        searchcontainer.hide();
    }
});