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

Robbie Thomas
Robbie Thomas
31,093 Points
Posted by Robbie Thomas
Robbie Thomas
31,093 Points

using.on ()

Says: On line 6 of app.js, fix the code so that when you add a color li dynamically the click handler will still work.

I have: $(".controls li").on("click", "li", function(){

It says: Bummer! You need to change the CSS of the selector on line 6 to be of the parent of the li i.e. .controls. "li" should be the second argument.

Confused...

3 Answers

Riley Hilliard
PLUS
Riley Hilliard
Courses Plus Student 17,771 Points
Riley Hilliard
Riley Hilliard
Courses Plus Student 17,771 Points

Yes, the issue looks like you are selecting the li, and then attaching the click event to an li inside of that li (which doesnt exist). First just select ".controls" with jQuery, then in the .on() assign the inner selector to the "li".

Think of it more like: When the selected element is clicked, and the click is on the ____ element inside of the selected element, execute the code block. That's how I think about it when when writing .on() events.

Neil Little
Neil Little
5,555 Points

Riley, would would be the difference between:

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

and 

$(".controls li").click(function(){...});

I can see where he went wrong, but unsure of why on was used rather than .click ?

Robbie Thomas
Robbie Thomas
31,093 Points
Robbie Thomas
Robbie Thomas
31,093 Points

Took the li off of .controls. That gave me the pass.

Martin Imfeld
Martin Imfeld
5,403 Points
Martin Imfeld
Martin Imfeld
5,403 Points

It is only accepting 

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

while it should also accept

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

Both are correct, the exercise, however, does only accept the first version. Maybe somebody at Treehouse can look into this, especially since the second version is the solution presented in the video ;)