filter elements from all elements in body with jquery

Question

If I have a set of jquery elements var elements = $('.containers'); How can I select everything in the body but that set of elements and attach a click event to it? I've tried something like,

var filtered = $('*').filter(function(index){
    return elements;
});

$(document).ready(function(){
    $('body').on('click', filtered, function(){
         alert('something on body was clicked that wasn't "element"');
     });
});

*This doesn't work at all

Answer 1

Using the .not() selector.

$('body').find('*').not('.containers').on('click',function(){
    // do something
});

Preferrably you would attach the click event to something much more specific than $('body').find('*') (which is all child elements for body), but working with what you gave me. Or you could go about it a different way:

$('body').find('*').on('click',function(){
    // do something
});

$('.containers').off('click');

This sets it for everything, and then removes it just for .containers items. A little verbose, but more explicit, and u just need to delete/modify the .off() function if you change your mind.

Answer 2

Just filter out the .containers elements, preferrably before you attach the event handler :

$(document).ready(function(){
    $('*').filter(function() {
         return ! $(this).is('.containers');
    }).on('click', function(){
         alert('something on body was clicked that wasnt "element"');
    });
});

EDIT:

If you're trying to close a dropdown, modal or something similar by clicking outside it, as indicated by the comments, the way to do that would be:

$(function() {
    $(document).on('click', function(e) {
        if ( !$(e.target).closest('.containers').length ) {
            // you clicked outside
        }
    });
});

Answer 3

if you want to check for .container and descendants of container you can use .filter(). Then check if current element is - or has ancestor elements has class=container using .closest()

$('body *').filter(function(){
    return $(this).closest('.containers').length === 0; 
}).on('click', function(){
     alert('something on body was clicked that wasn\'t "element" or inside element');
});

FIDDLE

Here's another solution

$('body').on('click','*:not(.containers,.containers *)', function(){
     alert('something on body was clicked that wasn\'t "element" or inside element');
});

FIDDLE

Answer 4

The better way to do is to have only one handler on document and check for the element which was clicked when event bubbles up to document.

$(document).on('click', function (event) {
    var $target = $(event.target);
    if ($target.hasClass('containers') || $target.closest('.containers').length > 0) {
        alert('something on body was clicked that wasn't "element"');
        return;    
    }

    // Rest of logic
});

Answer 5

Another option is simply add a handler to $('html') and then make sure that the container handler either calls event.stopPropagation(), or returns false, which handles the propagation stopping automatically in jQuery:

$('html').on('click', function () {
    alert("Clicked!");
});

$('.containers').on('click', function (event) {
    return false;
});

Example: http://jsfiddle.net/7hGL7/

For what it sounds like you are doing, i.e. closing a menu, this is a simple and straightforward solution.

Answer 6

One problem in your sample code is the unescaped single-quote in your alert.

As for excluding certain elements, I suggest using the route you have set up (attach the event to the body), then check if the event target has a given class. Like this:

$(document).ready(function(){
    $('body').on('click', function(e){
        if ($(e.target).hasClass('containers') || $(e.target).closest('.containers').length > 0)
            return; // do nothing with elements that have the container class
        alert('something on body was clicked that wasn\'t "element"');
     });
});

Note the escaping of the extra apostrophe in the word "don't" : don\'t.

Documentation and Related Reading

• jQuery.hasClass - http://api.jquery.com/hasClass/
• jQuery.closest - http://api.jquery.com/closest/
• "Values, Variables, and Literals" on MDN - https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Values,_variables,_and_literals