¿Cómo ocultar con jQuery un <div> cuando el usuario pincha fuera de el?

Para ocultar un <div> cuando el usuario pincha en cualquier zona fuera de el, estoy utilizando este código jQuery:

$('body').click(function() {
   $('.form_wrapper').hide();
});
 
$('.form_wrapper').click(function(event){
   event.stopPropagation();
});

Y el código HTML sería algo así:

<div class="form_wrapper">
   <a class="agree" href="javascript:;">Acepto</a>
   <a class="disagree" href="javascript:;">No acepto</a>
</div>

El problema es que cuando tengo enlaces dentro del <div> ya no funcionan cuando se pincha sobre ellos.

Estás leyendo una traducción autorizada de la pregunta Use jQuery to hide a DIV when the user clicks outside of it planteada por Scott Yu en StackOverflow.

Respuestas

Este es el código que debes utilizar para ocultar el <div> cuando se pincha fuera de el:

$(document).mouseup(function (e)
{
    // cambia este selector para adaptarlo al <div> de tu código HTML
    var container = $(".form_wrapper");
 
    // esta condición comprueba que el destino del click no sea el propio
    // contenedor ni ninguno de sus desdendientes (es decir, los enlaces que
    // están dentro del <div>)
    if (!container.is(e.target) &amp;&amp; container.has(e.target).length === 0)
    {
        container.hide();
    }
});

@librosweb

11 octubre 2014, 20:16