Question

I have a div tag which includes input controls. This div is opened when the user clicks on a menu item. I want to hide this tag when the click is outside that div area.

Currently I am able to hide the div when clicking outside it, but my div hides when I click any of the input controls that are in the div. How can I solve this?

My code is:

$(document).click(function (e) {
  var elem = $(e.target).attr('id');
  console.log(e.target);

  if (elem !== 'btnLogin') {
    // if (elem != 'TxtUserName' && elem != 'TxtPassword')
    HideLoginDetails();
  }

  if (elem !== 'hpUseFul') {
    // if(elem !== 'y')
  }
});

Answer 1

Demo: http://jsfiddle.net/3fbpA/

var aboveDiv = false;

$('#yourDiv').click(function () { 
  aboveDiv = true;
});

$(document).click(function () { 
  if (!aboveDiv) $('#yourDiv').hide();
  aboveDiv = false;
});