Html – Use jQuery to hide a DIV when the user clicks outside of it


I am using this code:

$('body').click(function() {


And this HTML:

<div class="form_wrapper">
   <a class="agree" href="javascript:;">I Agree</a>
   <a class="disagree" href="javascript:;">Disagree</a>

The problem is that I have links inside the div and when they no longer work when clicked.

Best Solution

Had the same problem, came up with this easy solution. It's even working recursive:

    var container = $("YOUR CONTAINER SELECTOR");

    // if the target of the click isn't the container nor a descendant of the container
    if (! && container.has( === 0)