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

Posted by Steven Plappert
Steven Plappert
5,031 Points

Bug with Task 1 in Stage 6 of JQuery Basics

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

Here is line 6: $(".controls li").click(function()

I did this to accomplish that: $(".controls ul").on("click","li",function()

4 Answers

Dino Paškvan
PLUS
Dino Paškvan
Courses Plus Student 44,108 Points
Dino Paškvan
Dino Paškvan
Courses Plus Student 44,108 Points

You have to remove li from the selector (not replace it with a ul):

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

because you are now specifying the li element as the second parameter of the on method.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

I wonder if the challenge should pass Steven's answer though, I don't think it's technically wrong is it?

Dino Paškvan
Dino Paškvan
Courses Plus Student 44,108 Points

No, if you dump it into a real world scenario, it should and would work. But I've contacted the support about a similar situation (where two or more solutions are possible and only one is accepted). The explanation that I've received is that code challenges seek to reaffirm what was seen in the video, so often, they will only accept the solution that was shown in the video.

This is not true for all challenges, some allow for variations.

mark kling
mark kling
5,504 Points

How are you able to get away with three "(" and only two ")"? It does work, however.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Mark,

That was only the first line.

Here's the full statement:

$(".controls").on("click", "li", function(){
  //Deselect sibling elements
  $(this).siblings().removeClass("selected");
  //Select clicked element
  $(this).addClass("selected");
  //cache current color
  color = $(this).css("background-color");
});

The closing curly brace for the handler, the closing right parenthesis for the .on() method and the semi-colon to end the statement are all on the last line So if you count parentheses again they should match up.

Steven Plappert
Steven Plappert
5,031 Points
Steven Plappert
Steven Plappert
5,031 Points

That is the weird thing though, as Andrew Chalkey, in the video, did this the way that I answered it. In fact, that is the only reason I answered it in this way.. Weird huh?

Dino Paškvan
Dino Paškvan
Courses Plus Student 44,108 Points

Nope, he didn't. He just used the $(".controls") selector.

Check the video at the 8:59 timestamp.

Steven Plappert
Steven Plappert
5,031 Points
Steven Plappert
Steven Plappert
5,031 Points

Thanks for responding and for the help by the way, definitely appreciated

Steven Plappert
Steven Plappert
5,031 Points
Steven Plappert
Steven Plappert
5,031 Points

Oh yep! You are totally right, I heard him say select the parent element beforehand and that was why I put in "ul" but then he just used the class. Awesome!