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
Stas Bunchukov
9,963 PointsWhile the teacher was looking for another method to bind new color elements. I've done it with the last function.
As you can see below. I've just added another function over anonymous one in order to use easily by calling its name below. I put this "#" symbol where you should look at. I'm just wondering what do you think?)) Coz my code works completely fine.
//Problem: No user interaction causes no change to application.
//Solution: When user interacts causes changes appropriately.
var color = $(".selected").css("background-color");//When the page loads first time we declare selected color.
// ################When clicking on control list items.
function controlColorItems() {
$(".controls li").click(function(){
//Deselect sibling elements.
$(this).siblings().removeClass("selected");
// Select cliked element.
$(this).addClass("selected");
//cache current color here.
color = $(this).css("background-color");// Caching the color helps to use it later for example for mouse events like drawing lines.
});
}
controlColorItems();
//When "New color" is pressed.
$("#revealColorSelect").click(function() {
//Show a color select or hide the color select.
changeColor();
$("#colorSelect").toggle();
});
//update new color span.
function changeColor() {
var r = $("#red").val();
var g = $("#green").val();
var b = $("#blue").val();
$("#newColor").css("background-color","rgb(" + r + "," + g +", " + b + ")");
}
//When color sliders change.
$("input[type = range]").change(changeColor);
//When "Add color" is pressed.
$("#addNewColor").click(function(){
//Append the color to controls ul.
var $newColor = $("<li></li>");
$newColor.css("background-color", $("#newColor").css("background-color"));//We want background color of this element to be the input from last function changeColor.
$(".controls ul").append($newColor);
//Select the new color.
controlColorItems();//###############Look for the function up above.
});
//On mouse events on canvas.
//Draw lines
1 Answer
Tobiasz Gala
Full Stack JavaScript Techdegree Student 23,529 PointsIt doesn't make any sense to add an event listener to the function when you can use event delegation or bubbling. This is why he used on() instead of click(). In your example, controlColorItems() is called every time you click add color. In other words, every new item has separate click event handler. By using on() you can simply apply handler to the parent and dynamically listen if children were clicked.
I recommend reading about event delegation (bubbling).