Jquery, como: clique em qualquer lugar fora do div, o div desaparece

No Jquery, como eu faria isso se eu tivesse um div, com diferentes elementos dentro dele, um select, uma input de pesquisa, etc, que quando eu clico fora do div, na página, o div desaparece, mas Eu posso clicar na seleção e digite a input de pesquisa e não tê-lo fade? qualquer ajuda é apreciada. -usuario

A resposta do Code Duck está incompleta, porque você precisaria que não desaparecesse se você clicasse no próprio DIV (somente fora). Então diga que seu DIV que deveria desaparecer tem um ID de “menu”.

jQuery("#menu").click(function(){ return false; }); jQuery(document).one("click", function() { jQuery("#menu").fadeOut(); }); 

O uso de um é mais conciso que o bind / unbind. Também os events com namespaces não são realmente necessários aqui se você usar um porque não há necessidade de desvincular explicitamente um manipulador de cliques em particular no documento.

O retorno falso é apenas dizer “pare de borbulhar este evento até o documento”.

Muitas checkboxs de diálogo modais usam uma sobreposição parcialmente transparente que cobre a página inteira, indicando que a checkbox de diálogo tem foco. Eu consideraria isso a melhor maneira de realizar o que você quer. Se você realmente não quer que a página fique escura ou escurecida, você pode sempre tornar a sobreposição completamente transparente. Por exemplo, confira Facebox .

Eu sei que esta é uma pergunta antiga, mas aqui está uma extensão que escrevi para adicionar uma function clickOutside aos elementos:

 $.fn.extend({ // Calls the handler function if the user has clicked outside the object (and not on any of the exceptions) clickOutside: function(handler, exceptions) { var $this = this; $("body").bind("click", function(event) { if (exceptions && $.inArray(event.target, exceptions) > -1) { return; } else if ($.contains($this[0], event.target)) { return; } else { handler(event, $this); } }); return this; } 

}

Com isso você poderia facilmente fazer

 $("#menu").clickOutside(function(event, obj) { obj.fadeOut() }); 
 $("#menu").click(function(){ $(document).unbind("click"); $("#menu").show(); $("#menu").bind('mouseout',function(){ $(document).bind("click",function(){$("#menu").fadeOut();}); }); }); 

Isso deve fazer .. felicidades.

Veja isso
Demo está aqui

 $('#menuBtn').click(function(e) { e.stopPropagation(); $('.navMenuSecWrapper').fadeToggle(); return false; }); $(document).click(function() { $('.navMenuSecWrapper').fadeOut(); }); 

Você pode vincular um manipulador de cliques em $(document) como

 $(document).click(function(){ $(this).unbind('click'); $('#menu').fadeOut(); }