Question

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() {

Answer 1

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”.