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 Rob Bartlett
Rob Bartlett
6,741 Points

Can't get toggleClass to work

So, I currently work in sales, and am trying to create a javascript app using jquery to keep a visual track on how many calls I've made.

I can't get the toggleClass function to work on the divs that are created. BUT, when troubleshooting it, it did work when I had it target a couple other elements.

Here's what we got -- a work in progress, never mind that some of the CSS doesn't match up to what it says in the comments

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Daily Call Log</title>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="style.css">

</head>

<body>
  <p>How many calls would you like to shoot for? 
    <input type="text" id="callGoal">
    <input type="button" value="Get after it!" id="start">
    </p>

  <p id="numberField"></p>

  <script src="callLog.js"></script>
</body>
</html>

and the Javascript

var callTarget

$("#start").click(function () {
  callTarget = document.getElementById("callGoal").value;
// Create a table of numbers for how many calls you want to make
$("#numberField").empty();
  for (i=1; i <= callTarget; i++) {
  $("#numberField").append("<div>" + i + "</div>");
}
});

// Click on a number
//    First click: Mark an X through number -- class: callMade
//    Second click: Create a circle around the X -- class: callConversation


$("div").click(function () {
  $(this).toggleClass("callConversation");
  });

//    Third click: Fill in the circle -- callSale
//    Fourth click: Back to the number, undo
// At the end of the page, tally up number of calls, conversations and sales

...and the CSS

body {
  text-align:center;
  font-family: Montserrat;
}

#numberField {
  width: 740px;
  margin: auto;
}

#numberField div {
  font-size: 2em;
  margin: 10px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  border-radius: 100%;
  border: 2px;
  text-align:center;
  float: left;
  vertical-align:middle;
}

.callConversation {
  background-color: firebrick;
}

3 Answers

Peter Smith
Peter Smith
12,347 Points

Hey! So you're running into a fun beginner issue! In fact I had this exact one when I first started.

Here's your probem. When your script runs it is going to attach click event listeners to all the divs in the document. But when the script runs there aren't any divs!! The divs don't exist until the #start click handler fires off. At that point the code that is meant to bind the click event listeners has already run and your new divs aren't getting the listeners bound to them and thats why your code isn't working.

So whats the solution? The solution is event delegation. Instead of binding the click listener to the div directly, bind it to a parent element with a second parameter in the click function which specifies which descendant anchors to listen for clicks on. If that sounds wordy, check this link for jQuery documentation on the subject.

But this code will solve your problem: 

$('#numberField').on('click','div',function(){
  //your code here!
});

Now when a div that is the child of #numberField is clicked, your code will execute. And since the event listener is bound to #numberField it will work even for divs that are created even after the listener is created!

rydavim
rydavim
18,814 Points
rydavim
rydavim
18,814 Points

I don't believe you can use .click on dynamically created content, such as those divs. Try using $(document).on instead.

$(document).on('click', 'div', function () {
  $(this).toggleClass("callConversation");
});

That should let you trigger those click events on your dynamically created divs.

Let me know if you run into any snags, though. Happy coding! :)

Rob Bartlett
Rob Bartlett
6,741 Points
Rob Bartlett
Rob Bartlett
6,741 Points

Marvelous. By the time I threw in the towel and decided to ask you guys, I'd started to suspect it was because the elements I wanted to manipulate weren't there when the script ran, but hadn't begun to grapple with how to deal with that.

Thanks!