CODEWITHSUNDEEP
jquery
Alan2
Alan2

Reputation: 24562

Different ways to use .on() with jQuery?

I am a bit confused about using .on() Can someone tell me the difference between:

$('#detailData').on('click', '.select-topic', function() {

and 

$('#detailData .select-topic').on('click', function() {

Upvotes: 0

Views: 49

Answers (4)

Roko C. Buljan
Roko C. Buljan

Reputation: 206028

The first is for dynamically created elements (.select-topic)
the second one will not delegate the click enent listener to newly created elements.

The first one is like the now deprecated .live() method.

Upvotes: 1

James Allardice
James Allardice

Reputation: 165951

The first one delegates a click event handler to the #detailData element. When a click event (that could come from any of its descendants) reaches that element, jQuery checks to see if the event target matches the selector, .select-topic. If it does, then the event handler is executed.

This is useful if .select-topic elements are added to the DOM dynamically - you can't bind event handlers directly to elements that don't exist yet.

It's possible because most DOM events bubble up the tree from the element on which they originate, up through all ancestor elements.

The 2nd example binds a click event handler to all .select-topic elements that exist in the DOM at the time the code is executed.

Here's a simple demonstration. For the following markup:

<ul id="myList">
    <li class="item">Item 1</li>
    <li class="item">Item 2</li>
</ul>​

Run the following code:

$("#myList .item").on("click", function () {
    $(this).text("Clicked!"); 
});

/*$("#myList").on("click", ".item", function () {
    $(this).text("Clicked!"); 
});*/

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

Attempt to click on "Item 3", and nothing will happen. Comment out the first .on() call, and uncomment the second. Run it again, and notice how the event handler now runs when you click on "Item 3".

Upvotes: 3

Tadeck
Tadeck

Reputation: 137310

The documentation can explain it to you:

.on( events [, selector] [, data], handler(eventObject) )

selector A selector string to filter the descendants of the selected elements that trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element.

In other words, in both cases the event is attached to the element with ID detailData, but in the first case it is delegated to all elements in it matching '.select-topic' selector. This will work, even if '.select-topic' is not matched at the time it is defined (because you do not attach events to that element, only parent elements).

More about event delegation: http://davidwalsh.name/event-delegate

Upvotes: 0

xdazz
xdazz

Reputation: 160833

$('#detailData')
.on('click', '.select-topic', function () {

binds the click event handler with #detailData.

$('#detailData .select-topic')
.on('click', function () {

binds the click event handler with #detailData .select-topic

Upvotes: 0

Related Questions