jQuery - how to hide a DIV element only when clicking outside of it
<p>I have a <code>DIV</code> element that appears when a certain action is performed.  For the sake of simplicity, I wrote a very simple routine that mimics the issue I'm running into.  The problem I am facing, however, is that when you click inside the <code>DIV</code> element (and outside the <code>textarea</code>), it will hide the <code>DIV</code> anyway.</p>

<p>Here is the code below:</p>

<pre><code>&lt;body&gt;
outside div
&lt;br&gt;&lt;br&gt;

&lt;a href="#" id="wrap_on"&gt;make inside appear&lt;/a&gt;
&lt;br&gt;&lt;br&gt;

&lt;div id='wrap' style='background:red;display:none;padding:10px;width:155px'&gt;
    &lt;textarea id='inside'&gt;inside div&lt;/textarea&gt;
    &lt;div id='inside2'&gt;also inside div -- click me&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;

&lt;script&gt;
$(document).ready(function() {
    $('#wrap_on').click(function() {
        $('#wrap').show();
        $('#inside').select().focus();    
    });

    $('#inside2').click(function() {
        alert('test');
    });

    // #inside2 does not work but #wrap does hide
    $('#wrap').focusout(function() {
        $('#wrap').hide();
    });
});
&lt;/script&gt;
</code></pre>

<p>Or you can tinker with it here: <a href="http://jsfiddle.net/hQjCc/" rel="nofollow">http://jsfiddle.net/hQjCc/</a></p>

<p>Basically, I want to be able to click on the text "also inside div -- click me" and have the alert popup.  However, the <code>.focusout</code> function is preventing it from working.  Also, I want to hide the <code>#wrap DIV</code> if you click outside of it.</p>
