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

Alex Morask
Alex Morask
6,430 Points
Posted by Alex Morask
Alex Morask
6,430 Points

Can someone explain how the empty function in $newColor.click() at the end works?

When the add color button is pressed, we're creating the variable $newColor and setting it equal to a new list item. We change the color of that list item and then append it to the controls list.

But how does $newColor.click(), which comes directly after we append the list item, actually do something when we're calling an empty function? To me, it just looks like we're telling the app we want to do something when the list item is clicked, but we're not telling it what we want to do. I imagine this has a lot to do with the way .on() is used, but I'm still pretty confused.

Thanks!

4 Answers

Hugo Paz
Hugo Paz
15,622 Points
Hugo Paz
Hugo Paz
15,622 Points

Hi Alex,

This function is called last when the addColor is pressed. 

$newColor.click();

when it runs it goes here:

//When clicking on control list items
$(".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");

  console.log('i was clicked');
});

Before the $newColor.click() is run, we append the class .controls to the list item element. So when an element with that class is clicked, it goes to that second piece of code above. Since we are calling the click method by default when we add a new color, it always goes to that second piece of code.

Alex Morask
Alex Morask
6,430 Points
Alex Morask
Alex Morask
6,430 Points

Hey Hugo,

Thanks for the answer. So, just to be sure; essentially what's happening with the .on method is that you're binding an event (and associated function) to the child of a specific element without actually calling the event.

In the example, you're binding the click event to any list item child of the .selected unordered list and then eventually calling the event with the $newColor.click() code at the bottom of the page. Am I on the right track?

Thanks,

Diego Villaseñor
Diego Villaseñor
12,615 Points
Diego Villaseñor
Diego Villaseñor
12,615 Points

Hi Alex and Hugo,

as far as I can understand, the click method actually selects the new color, once the "Add Color" button has been clicked. If we comment out that piece of code, the color will be added, but not selected, so my guess is that that $newColor.click(); serves somehow like an automated click to select the new color.

I'm not sure if I'm getting this right, so please tell what do you think.

Byron Glover
Byron Glover
5,772 Points
Byron Glover
Byron Glover
5,772 Points

Thanks for that bit of info, so the new colored circle which is added to the rest will be selected by default.

This would have been very simple to out line if the bumbling not so good teacher had just gone back to the example page and shown us the difference!! >.<

Adam McGrade
Adam McGrade
26,333 Points
Adam McGrade
Adam McGrade
26,333 Points

I think what Diego is saying is correct, the $newColor.click(); is actually creating a click event. We have written the code earlier on to respond to any click events on the color list elements by adding a class of selected, to the list element. So when a new list element is created, $newColor.click() is executed, and a new click event on a list element is detected by the browser. This then runs the code we wrote to respond to this event, and adds the selected class to the new color list element.

Gavin Ralston
Gavin Ralston
28,770 Points
Gavin Ralston
Gavin Ralston
28,770 Points

Right, this is what he meant by the .click() event is essentially a getter or a setter.

As a "setter", you're defining what happens when the click event happens on the object, so you're creating an anonymous function inside of it to say "this is what happens when we click this"

As a "getter" it's maybe not so intuitive, but essentially you're saying "get me what happens on a click on this element" which calls the anonymous function you defined earlier. That turns out to be selecting that list item and deselecting the siblings.

Scott Chen
Scott Chen
8,026 Points
Scott Chen
Scott Chen
8,026 Points

Take a look at the examples in the documentation for click(): http://api.jquery.com/click/#click

I guess when you call click() without any argument, it'll look for an appropriate click() that is previously defined. This is purely a speculation, but it seems like because click() is called on a list element [since $newColor is <li></li>], jQuery looks for a previously-defined click() listener that is also called on a list element, such as our

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

listener, so this latter one gets called when $newColor.click() is executed.