title: How can I get the toggle() method to stop repeating itself? jQuery
body: <pre><code>$(document).ready(function(){
  
  $('#add').click(function(){
      $('#list-area').append("&lt;div class='list-item'&gt;&lt;div class='box'&gt;&lt;div class='dot'&gt;&amp;#x2713;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;");
  
      $('.box').click(function(){
          $(this).children('.dot').toggle(200);
      });
  });
  
  });
  </code></pre>
  
  <p>Here's a jsfiddle link to all my code.</p>
  
  <p><a href="http://jsfiddle.net/96UVW/1/" rel="nofollow">http://jsfiddle.net/96UVW/1/</a></p>
  
  <p>This is a rudimentary replica of a checklist that I'm building.
  Here's how it works (or supposed to work):</p>
  
  <p>-Click the " + " to add an item. (This works fine.)</p>
  
  <p>-Click the green box to check-off the item, or click it again to uncheck it...</p>
  
  <p>...This misbehaves. What I want is that when a '.box' is clicked, it's respective '.dot' child element should toggle display once. But what happens is, the toggle repeats depending on how many items there are. </p>
  
  <p>To clearly see my problem, add 5 items and click on their green boxes. The top will toggle 5 times, the next will toggle 4 times, etc.</p>
  
  <p>Why does this occur? How can I adjust the code to make it behave the way I explained?</p>