Question

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-hide 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

Answer 1

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

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