CODEWITHSUNDEEP
jquery
MaximeBernard
MaximeBernard

Reputation: 1100

What's the purpose of 2nd selector in jQuery .on()?

Since you call $('mySelector').on('myEvent', 'mySecondSelector'), I don't understand the use of "mySecondSelector" ?

Upvotes: 0

Views: 69

Answers (4)

charlietfl
charlietfl

Reputation: 171679

The second selector is the target . This syntax enables using on() as a delegation method in cases where target(s) may not be present at time code is run

Assume this markup

<ul id="list">
    <li class="item">Item</li>
</ul>

You can add a click handler to item class:

$('.item').on('click',doSomething);

But if we now add a new item to list

$('#list').append(' <li class="item">Item</li>');

This new item didn't exist when the click handler was called and therefore won't have the event handler bound to it

Instead we use the main ul or any other permanent ancestor up to document level since it always exists and target the items

$('#list').on('click', '.item', doSomething);

Interpret this as : When click on #list, if the target of click is .item, run the handler, otherwise don't do anything

Upvotes: 4

vvohra87
vvohra87

Reputation: 5664

In jQuery 1.7x the .on() method has been added.

To answer your question, I need to first explain why this was added. Earlier there were (and still are thou depricated) methods like .live() which would constantly monitor the DOM for elements matching the selector. So on every DOM change (be it insert, rearrange, delete, etc) the listener would be active and trying to see to what it needs to attach delegates.

Imagine a page with a container and 1000's of child elements. Now, the child elements keep changing (mostly due to Ajax) and you need to bind a .click() event to every child element. This used to consume a lot of processing and had fairly poor performance.

Enter the .on() method. Basically, the two selectors are for:

First selector - the parent element which should not change once the DOM is loaded

Second selector - the child element which is the actual target of the method you are writing which may come and go from the first selector even after DOM is loaded.

For broad use, many people use `.on()' like

$(body).on("click", "#mydiv", function(){
    // do something
});

This is usually ok since DOMs aren't normally very large. However, what this does is: it tells jQuery to watch the body element in the DOM and look for all #mydiv elements inside it. Not very different to the older methods when you have 1000's of child elements being manipulated.

Therefore, when using .on() please try to make the first selector the one which will contain the second selectors elements and no further up the DOM.

Upvotes: 1

Kiro Coneski
Kiro Coneski

Reputation: 515

If you have an element that contains several child elements, if you don't specify the second selector then the event will be triggered no matter what child element you click. If you specify it, the event will fire up only if you click on selected elements with that selector.

For example, you might have:

<div id="clickable">
    <div id="fireEvent">Example</div>
    <div id="dontFireEvent">Example</div>
    <div id="fireEvent"></div>
</div>

Now if you call, $('#clickable').on('myEvent'); the event will fire up no matter where you click in the area.

But if you call, $('#clickable').on('myEvent','#fireEvent'); the event will fire up only if you click the first and third div (the ones that have the id of 'fireEvent'.

Upvotes: 1

Siva Charan
Siva Charan

Reputation: 18064

$('mySelector').on('myEvent', 'mySecondSelector')

mySecondSelector:

A selector string to filter the descendants of the selected elements that will call the handler. If the selector is null or omitted, the handler is always called when it reaches the selected element.

Refer the On() for more details

Upvotes: 0

Related Questions