Unexpected event using .not() jquery selector

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?

Richard Dalton · Accepted Answer · 2012-12-11 15:11:26Z

3

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/

answered Dec 11, 2012 at 15:11

Richard Dalton

35.8k6 gold badges75 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Unexpected event using .not() jquery selector

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related