CODEWITHSUNDEEP
jqueryclick
jerome
jerome

Reputation: 4977

jQuery use :not selector with on

Having a bit of trouble. Please take a look at the following code.

$(document).on("click", "*:not(.parent-container a)", function(e) {
    // Do stuff if we have not clicked a link inside .parent-container
});

.parent-container is appended to the DOM. Then we want to bind a "click" event everywhere but to the links inside of .parent-container, but I am finding that when I click the links inside of .parent-container that "Do stuff if we have not clicked a link inside .parent-container" is still executing.

Any advice as to how to correctly avoid binding to ".parent-container a"?

Upvotes: 0

Views: 69

Answers (2)

Denys Séguret
Denys Séguret

Reputation: 382130

Usually the right practice is to have two bindings (in fact, as your real application already have more bindings, and probably ones for the a elements, you don't add bindings, you just add the return false) :

$(document).on("click", function(e) {
    // Do stuff if we have not clicked a link inside .parent-container
}).on("click", ".parent-container a", function(e) {
    // you probably already have something to do 
    return false; // avoid propagation, the other event handler won't be called
});

Demonstration

Upvotes: 3

Arun P Johny
Arun P Johny

Reputation: 388316

You can do something like

$(document).on("click", function (e) {
    if (!$(e.target).is('.parent-container a')) {
        console.log(e.target)
    }
});

Demo: Fiddle

Upvotes: 1

Related Questions