title: Javascript loop with binded click event always returning last result
body: <p>I have a for loop running in javascript. In this loop I am creating a list item and binding a click event to it. When I click this list item I want it to call a function with the data from the current loop object as a parameter.</p>
  
  <p>The problem is, no matter what list item I click. The data that is being passed as the parameter is the last element of the object I am looping rather than the current one that is being clicked.</p>
  
  <pre><code>for(e in data) {
  
      var suggestItem = $('&lt;li&gt;'+ data[e]['name'] +'&lt;/li&gt;');
  
      suggestItem.click(function() {
          $(this).addClass('activeSuggestion');
          suggestSelect(suggestField, data[e]);      
      });
  
      suggestList.append(suggestItem);
  
  }
  </code></pre>
  
  <p>I think I understand why this happens but not sure how I should handle it.</p>