Use jQuery to hide DIV when click outside it

Question

I am using this code:

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

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


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

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

Answer 1

You might want to check the target of the click event that fires for the body instead of relying on stopPropagation.

Something like:

$("body").click
(
  function(e)
  {
    if(e.target.className !== "form_wrapper")
    {
      $(".form_wrapper").hide();
    }
  }
);

Also, the body element may not include the entire visual space shown in the browser. If you notice that your clicks are not registering, you may need to add the click handler for the HTML element instead.

Answer 2

You'd better go with something like this:

var mouse_is_inside = false;

$(document).ready(function()
{
    $('.form_content').hover(function(){ 
        mouse_is_inside=true; 
    }, function(){ 
        mouse_is_inside=false; 
    });

    $(body).mouseup(function(){ 
        if(! mouse_is_inside) $('.form_wrapper').hide();
    });
});

Answer 3

$(document).click(function(event) {
    if ( !$(event.target).hasClass('form_wrapper')) {
         $(".form_wrapper").hide();
    }
});