What is wrong with my body-click event?
<p>I have that text field:</p>

<pre><code>&lt;input type='text' id='title' name='title'&gt;
&lt;div id='error' class='error'&gt;&lt;/div&gt;
</code></pre>

<p>When user clicks out of the text field and there is a validation problem, the div "error" appears.</p>

<p>What I want to do is to hide that little div when user clicks anywhere in the body. 
I tried e.stopPropagation in the body click event but didn't work.</p>

<p>The div never appears because when I blur out of the textfield, it's considered a body click</p>

<p>Please let me know if you have any idea. Regards</p>

<p>EDIT:
I have updated the code. The code inside the body click event is supposed to hide the "error" div when anything but the text field is clicked, but can't get it to work.</p>

<pre><code>$('body').click(function(event){
        if ($(event.target).closest('#title').get(0) == null ) { 
            $("#error").hide(); 
            }});

// Validation
$('#title').blur(function(){
    var titleinput=$('#title').val();
    if (titleinput.length &lt;30 || titleinput.length &gt;50){
        $('#error').text('Your title must be between 30 and 50 characters').show();
        }
    });
</code></pre>
