Unexpected event using .not() jquery selector - jquery-selectors

Question

I am showing a hidden menu when user clicks on an arrow (.userArrow) and I hide it when user clicks outside the container (.menuTrigger)
<div class="box">
<div class="menuTrigger fRight">
<span class="userArrow ">filtrar ▾</span>
<ul class="userOptionsUl dropdownMenu" style="display: none;">
<li><input type="text"></li>
</ul>
</div>
</div>
Javascript
$(function() {
/* el dropdown del dock*/
$('.menuTrigger .userArrow').click(function(e) {
e.preventDefault();
$(this).parent().find('.dropdownMenu').show();
e.stopPropagation();
});
$('body').not('.menuTrigger').click(function() { /* cambiar por la otra clase que tiene*/
$('.dropdownMenu').hide();
console.log('yo lo he escondido');
});
});
http://jsfiddle.net/5VQXg/
My problem here is that when user clicks to show the hidden menu and then clicks to type into the input. The menu is hidden.
The thing that all clicks are being inside .menuTrigger (or childs)
Question is, why $('body').not('.menuTrigger').click() when all clicks are being in childs of this container?

Answer 1

What your code is doing is filtering out any body element with a class of menuTrigger, which doesn't exist.
What you actually need to do is check if the element that was clicked (e.target) is inside of menuTrigger and then don't run the code if it is:
$('body').click(function(e) { /* cambiar por la otra clase que tiene*/
// If the clicked element is not inside menuTrigger div hide the menu
if (!$(e.target).closest('.menuTrigger').length) {
$('.dropdownMenu').hide();
console.log('yo lo he escondido');
}
});
http://jsfiddle.net/5VQXg/3/