Bind js event to document except 1 element

Basically I have a popup and开发者_高级运维 want to hide it when it is clicked anywhere outside, but one element (which is another popup, let say div#AnotherPopup). Then I click on #AnotherPopup, it should not hide the original one.. It does now, because I have this:

  $(document).bind('click', methods.hide);

How to bind it to document, except #AnotherPopup ? :)

You can't really but you can check inside methods.hide if the target element is #AnotherPopup and immediately return out of the function before doing anything.

The click handler for #AnotherPopup is to stop document from getting a click event.

$(document).bind("click", function () {
   alert(this.innerHTML) 
});
$('#AnotherPopup').click(function () {return false;});

Example

By using unbind you can do this:

$(document).bind('click',methods.hide);
$('#AnotherPopup').unbind('click',methods.hide);

Read more about unbind here