jQuery .not() issues

Question

The premise of what I'm trying to do is use jQuery to start a CSS transition to open and close a search box.

User clicks magnifying glass icon, box opens, user clicks anywhere on the page but the search form, box closes.

To close, using this:

$('body *').not('#header-search, #header-field, #header-submit').click(function () {

And different variations of the answer found here: jQuery - Select everything except a single elements and its children? without success.

Clicking on the input#header-field always closes the box.

Pen Here:

http://codepen.io/anon/pen/RNbmwr

Thanks for reading.

Answer 1

Your code is very aggressive ( it gets applied to all elements, so inner element to those in the .not() will trigger it ).

It is better to delegate the closing of the box to the body ( since click events bubble up ), and manually cancel any event that occurs under the forbidden list.

$('body').on('click', function(){
   // code for closing box here
});

$('#header-search, #header-field, #header-submit').on('click', function(){
   return false; // stop bubbling of event
});

---

And since in your example the #header-field and #header-submit are descendants of header-search you only need to cancel the bubbling on that

$('#header-search').on('click', function(){
   return false; // stop bubbling of event
});

Demo at http://codepen.io/gpetrioli/pen/XJrwXO

Answer 2

Try the jQuery toggle() function:

<script>
$( "button" ).click(function() {
  $( "p" ).toggle( "slow" );
});
</script>

Substitute the id for your magnifying glass for "button" and change the paragraph -- $("p") -- the search controls you want to show/hide. Toggle changes the visibility of the indicated id or class. If it is initially hidden, mouse click will make it visible; if initially visible, mouse click will hide it.

Finally, change the speed of the transition if you don't want it to move "slow"

A more complete explanation of toggle() is available at http://api.jquery.com/toggle/

Answer 3

There are many elements on the page. Some of them may contain or be contained by the elements you name. So they will still trigger the event.

Instead, bind a single event handler:

$("body").click(function(evt) {

and check if you clicked on one of the elements:

    if( $(evt.target).parents("#header-search").length > 0) {

cancelling the handler if so:

        return true;
    }

Perform the actual event otherwise:

    doSomething();
});