Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

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

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.

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

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

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 ;)