title: How to loop over an array and add jQuery click events?
body: <p>I'm trying to loop over a simple array, find elements based on the array values, and then add a click event for each element. For some reason (maybe related to the scope?) all the events think they're at the end of the array.</p>
  
  <p>Example HTML:</p>
  
  <pre><code>&lt;!-- "Sectors" --&gt;
  &lt;div class="a"&gt;a&lt;/div&gt;
  &lt;div class="b"&gt;b&lt;/div&gt;
  &lt;div class="c"&gt;c&lt;/div&gt;
  </code></pre>
  
  <p>Corresponding javascript:</p>
  
  <pre><code>var sectorArray = ["a", "b", "c"];
  // Loop over sector letters
  for (var s in sectorArray) {
      var sector = sectorArray[s];
      console.log("Adding click event for sector: " + sector);
      $('div.' + sector).on("click", function(e){
          console.log("Clicked sector: " + sector);
      });
  }
  </code></pre>
  
  <p>When I click on any div, I get the message that I'm on sector "c". Here is a jsfiddle: <a href="http://jsfiddle.net/luken/Pd66m/" rel="nofollow">http://jsfiddle.net/luken/Pd66m/</a></p>
  
  <p>I was able to fix the problem by making everything inside the for-loop into it's own, separate function... and there are other solutions... But I'd like to figure out why this, above, won't work. Thanks.</p>