Question

Possible Duplicate:
jQuery bind click ANYTHING but ELEMENT

I have this HTML

<div id="outer">
  <input id="input1" type="text" value="button1"/>
  <input id="input2" type="text" value="button2"/>
</div>

And I am trying to use this

var insideOuter = "";

jQuery('#outer').live('click', function (e) {
    if(insideOuter != "" && insideOuter != 'outer'){
        alert('Inside');
    }
    insideOuter = "outer";
    return false;
});

jQuery('body').live('click', function (e) {
    if(insideOuter != ""&& insideOuter != 'body'){
        alert('Outside');
    }
    insideOuter = "body";
    return false;
});

Basically, I am trying to

1. If user clicks inside
   id="outer" then do nothing else
2. If user clicks outside
   id="outer"do something

Can someone recommend something better ?

Answer 1

This is a duplicate question from one asked recently…I’ll find that answer and post a link.

$(document).bind('click', function (e) {
 // Do whatever you want; #outer click event has been stopped
});

$('#outer').bind('click', function(e) {
    e.stopPropagation();
});

jQuery bind click *ANYTHING* but *ELEMENT*

How do I detect a click outside an element?