CODEWITHSUNDEEP
javascriptjqueryjquery-selectors
Arashsoft
Arashsoft

Reputation: 2757

What is the point of optional selector in jQuery .on() function?

jQuery .on() has an optional selector like this:

$("foo").on(events, ["selector"], handler)

This code finds "foo" in DOM and filter its descendants with "selector", then bind the event to the filtered result.

I think the above code is completely same as this code without the optional selector

 $("foo selector").on(events, handler)

This code finds "foo" in DOM, then finds "selector" in descendants of "foo" (the result is same as above code).

Real example:

$(".class1").on("click" , ".class2", function(){});

and

$(".class1 .class2").on("click" , function(){});

My question is what is the difference between above codes?

If there is not any difference, why jquery has this option (is it redundant)?

Upvotes: 0

Views: 238

Answers (4)

Jose Mato
Jose Mato

Reputation: 2799

With three parameters you will use "event delegation". This technique allow you to avoid two troubles:

  1. Keep better memory performance because you are attaching an event to a parent element so you will have only one event valid to a lot of events, for example, you can attach event delegale click to a div with id "my-element" and manage the click for all paragraphs:

    $("#my-element").on('click', 'p', function(event) {});

  2. If you have events associated on the page (for example, on click on all paragraphs) and you load more paragraphs using ajax and put on html then new elements will not have the previous events associated, for example:

    // jquery will find all "p" on the DOM
$("p").on('click', function(event) {
        // click on element p
    });


// now, if you add more elements p to the DOM, will not have 
// the previous click event, but with event delegation click event will be available automatically

Upvotes: 2

Gene R
Gene R

Reputation: 3744

if i am not wrong: one event handler for all cells

 $('table').on('click', 'td', function(){...});

separate event handlers for every td

$('table td').on('click', function(){...});

Upvotes: 2

kvn
kvn

Reputation: 2300

You should first understand the working of jQuery .bind() and .delegate() to understand the optional parameter in .on().

$("#element").bind("click", clickFn) attaches an event listener to #element whereas $("body").delegate("#element", "click", clickFn) attaches the event handler to body and will check if the event originated from #element, if it did, clickFn is executed, else it is ignored.

$("#element").bind("click", clickFn) is identically similar to $("#element").on("click", clickFn);

$("body").delegate("#element", "click", clickFn) is identically similar to $("body").on("click", "#element", clickFn)

In fact, jQuery internally calls .on() when .bind() and .delegate() are triggered.

Upvotes: 4

DinoMyte
DinoMyte

Reputation: 8858

The difference lies on how you want to target certain element lookup vs target element in a certain expression.

$(".class1 .class2").on("click" , function(){}); -> This would just invoke click event on elements having classes class2 inside class1

For example : 

$(".class1 .class2").on("click" , function(){
  $(this) // represents elements with class2 inside class1
});

$(".class1").on("click" , ".class2", function(){}); -> This would target the elements having class class2 inside class1 during click event.

For example : 

$(".class1").on("click" , ".class2", function(){
  $(this) // represents elements with class2 inside elements with class1
});

Upvotes: 0

Related Questions