Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript jQuery Basics (2014) Creating a Simple Drawing Application Perform: Part 3

Posted by Ricardo Sala
Ricardo Sala
16,212 Points

$(".controls").on("click","li", function(){}) ????

What is the difference between:

1) $(".controls").on("click","li", function()....

2) $(".controls li").on("click", function()...

3) $(".controls li).click(function()...)

???

Thanks!

3 Answers

Konrad Traczyk
Konrad Traczyk
22,287 Points
Konrad Traczyk
Konrad Traczyk
22,287 Points

Hello,

First method can work on elements that haven't been created before callback has been attached in your code, and that's the main diffrence in this methods.

Example

$(".controls li").on("click", function(){console.log($(this))});
$(".controls").append("<li>New one</li>"); // new one element won't fire the callback because callbacks was binded line before to every element was found with selector ".controls li"

$(".controls").on("click", "li", function(){console.log($(this))});
$(".controls").append("<li>New one</li>"); // now callback function triggers also on the appened element, because it looks for "li" elements inside ".controls" element

Second and Third statement can be used with the same effect.

Hope it clarifies the diffrence between those.

Konrad

Ari Misha
Ari Misha
19,323 Points
Ari Misha
Ari Misha
19,323 Points

Hiya there! In libraries like jquery, DOM manipulation and DOM Traversing is so much easier and so much faster. Here is the official/valid syntax for .on() method:

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

Where, events represents events you want to listen for on the given selector. data is the data passed to handler in event.data when event is fired. selector is simply the selector string that triggers the event. and finally handler is your callback function(but if you provide false as the handler , it gets converted to return false which doesnt return anything). .on() also takes childSelector And in the first example p is acting as a childselector of control class.

But in second and third statements, your're traversing the DOM instead of passing the childSelector to ".on()" method. And the only difference between second and third statements is that in the third statement you've attached a click event directly to the provided selector. All the statements renders the same effect . its the syntax thats different.

~ Ari

Charles Wanjohi
Charles Wanjohi
9,235 Points
Charles Wanjohi
Charles Wanjohi
9,235 Points

Note that the on() method takes two arguments; the event and the callback function.Therefore option 2 is the correct way to register a click on the selected elements.The option ie

$(".controls li").on("click", function()...

simply meant register a click event in the li elements inside the element whose class is controls