JQuery use .on() with not selector

Question

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

Answer 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     }  }); 

Answer 2

You can actually use the :not selector with the .on method, like so.

This is a cleaner solution than filtering results per Tats_innit's answer.

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

I'm using jQuery 1.11.0.