JQuery use .on() with not selector

问题:

I am using .on() function with this syntax:

$(".schemaTab").on("click", ".schema", function () {})

instead of .live() because I am adding .schema divs dynamically. Those divs have this code:

<div class="schema" id="SCH_16">
   <img src="Img/btnRemove.png" class="ikona SCH_Remove" alt="Smazat" title="Smazat">
</div>

But I need to exclude the img from click event of its parent div, so any idea how to do it?

I tried:

$(".schemaTab").not(".SCH_Remove").on("click", ".schema", function () {})

...but it didn't work and I don't know how to add the .not() inside the .on() code

回答1:

.not() won't work because on method attaches event handlers to the currently selected set of elements in the jQuery object and uses the original selector to test whether the event should apply.

So I reckon selecting and then filtering in your case will do the trick.

API: http://api.jquery.com/on/

you could try this:

$(".schemaTab").on("click", ".schema", function (e) {

    if (!$(e.target).is(".schemaTab")) {
         // not stuff in here
    }

});

回答2:

Just make sure the target matches:

$('.schemaTab').on('click', '.schema', function(e) {
    if(!$(e.target).is('.schema')) {
        return;
    }

    // Do stuff
});

回答3:

I just ran into this problem and used the :not selector, like this:

$('.schemaTab').on('click', '.schema:not(.booga)', function(event) {
  // Fun happens here
});

I'm using jQuery 1.11.0, I don't know how far back this works.

回答4:

The whole point of doing this is to handle events on elements not yet in the DOM, which includes your .sch_Remove.

$(".schemaTab").on("click", ".schema", function () {})

In order to prevent the parent click action from being triggered when that img is clicked, add the following (in addition to your function above).

$(".schemaTab").on("click", ".SCH_Remove", function () { return false; })

This will prevent the 'click' event from propagating to the parent and triggering its onclick method and prevent the default click behavior.