jQuery - cliquez (presque!) N'importe où pour div

Question

J'ai une boîte de saisie de recherche qui apparaît lors du survol d'un bouton. Plutôt que d'avoir son propre bouton de fermeture, j'aimerais pouvoir cliquer n'importe où sur la page pour cacher de nouveau la recherche.

Si j'attache un gestionnaire de clic au document, cela fonctionne correctement mais le problème est que la recherche elle-même fait partie du document. Donc, si vous cliquez sur l'entrée (ce qui bien sûr vous devez faire pour taper une recherche), la recherche disparaît.

je l'avais espéré que je serais capable d'écrire une soemthing fonction comme ça ...

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

i.e. appliquer un gestionnaire de clic sur le document entier APART de la recherche. Malheureusement, cela ne fonctionne pas.

alors quelle est la réponse?

En vous remerciant à l'avance

Answer 1

Annuler l'événement click de se propager quand il provient du bouton que vous aimez:

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

Answer 2

Vous pouvez le faire en arrêtant l'événement click de bouillonnement, comme ceci:

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

event.stopPropagation() empêche tout le chemin à document la bulle d'aller plus, ce qui déclenche la .fadeOut(), partout sinon (par défaut) va bulle à document, provoquant le fondu à se produire.

Answer 3

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(); 
    } 
});