Question

I have a div used for filtering and i want it to close when anything outside of the div is clicked.
The selector I am trying to build, basically selects all elements except a specific element and excludes its children.
Here is what I have tried, but haven’t been able to get working

$('*:not(:has(.exclude *))').live('click', function() {HideFilter();});

page structure is simplified to this:

<div></div>
<div>
 <div></div>
 <div>
  <div class="exclude"><inputs></div>
 </div>
 <div></div>
</div>

so I want all of the divs, but the one and everything in the .exclude to have the event.
I have been at this for a while, I need some help.

Answer 1

Have you tried

$('*:not(.exclude, .exclude *)').live( ... )

?
[edit[ Ah I see – the problem is that even if you exclude the stuff, the events still bubble up.

Try something like this:

$('*').live('click', function(e) {
  if (!$(e.target).is('.exclude, .exclude *'))
    // do interesting stuff
  }
  return false;
});

That should stop event propagation on the excluded things without actually doing anything.

Example page: http://gutfullofbeer.net/balloon.html

edit update, 3 years later: the .live() method is at this point long-deprecated. That last example should look like this in new code:

$('body').on('click', '*', function(e) {
  if (!$(e.target).closest('.exclude').length) {
    // do interesting stuff
  }
  return false;
});