Geek asks and answers

JQuery - Bind to all elements excluding a class?

I am trying to bind a click to all elements that do not have a specific class.

I tried the following and after some googleing, it seems like it is correct.

$('*:not(.class)').click(function() {
    alert('Clicked...');
});

$(':not(.class)').click(function() {
    alert('Clicked...');
});

Now, what I just realized when writing this is that the elements overlap on top of the other elements, and all the elements under the click cause a click? It's right? I think that when the following code is executed, I get 3 to 6 "clicks" per click.

$('*').click(function() {
    console.log('click');
});

Does anyone have any light to shed?

EDIT (already): I just thought of a workaround as shown below:

$('*').click(function() {
    if ($(this).hasClass('class')) {
        console.log('click');
        return false;
    } else {
        console.log('click');
    }
});

LOGIC: This "class" element will be the top layered element and therefore will trigger the first click (craft theory), so it has a / break return class;

+3
1

stopPropagation. clicked.

$('*:not(.class)').click(function(event) {
    event.stopPropagation();
    alert('Clicked...');
});
+9

More articles:


All Articles