How to hide a div if the user cicks anywhere on the page except 2 elements using jQuery?
<p>I have the following markup:</p>

<pre><code>&lt;a href="" id="clickMe"&gt;Click Me&lt;/a&gt;

&lt;div id="foo" style="border:1px solid red; display:hidden"&gt;&lt;/div&gt;
</code></pre>

<p>My code to get the "foo" div to show on click.</p>

<pre><code>$('#clickMe').click(function(e) {
    $('#foo').show();
    e.preventDefault();
});
</code></pre>

<p>Now how can I hide the div again <strong>IF THE USER CLICKS ANYWHERE ON THE PAGE EXCEPT THE DIV ITSELF OR THE CLICK ME LINK?</strong></p>

<p>Note: I need to be able to do this without changing the markup.</p>
