How to loop over an array and add jQuery click events?

Question

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.

Example HTML:

<!-- "Sectors" -->
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>

Corresponding javascript:

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);
    });
}

When I click on any div, I get the message that I'm on sector "c". Here is a jsfiddle: http://jsfiddle.net/luken/Pd66m/

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.

@Luke Iteration order is not guaranteed. Inherited properties are also enumerated. Bad juju. — Alex, Jan 12 '14 at 02:17
@Luke http://stackoverflow.com/questions/500504/why-is-using-for-in-with-array-iteration-such-a-bad-idea — James Montagne, Jan 12 '14 at 02:18

score 3 · Accepted Answer · answered Jan 12 '14 at 02:09

3

closure issue, try this. I added an anonymous function to "enclose" loop values.

var sectorArray = ["a", "b", "c"];
// Loop over sector letters
  for (var s in sectorArray) {
    var sector = sectorArray[s];
    (function(sec){
      $('div.' + sec).on("click", function(e){
        console.log("Clicked sector: " + sec);
      });
    }(sector))
 }

answered Jan 12 '14 at 02:09

james emanon

11,185
11
56
97

Although many of these solutions work, I went with this solution. It worked well ...although I'm not a fan of the anonymous function notation. – Luke Jan 12 '14 at 04:57

score 3 · Answer 2 · answered Jan 12 '14 at 02:09

Another way with pure js, by adding a closure:

for (var s in sectorArray) {
    (function(s){  //This line creates a 'per loop cycle' s var
       var sector = sectorArray[s];
       console.log("Adding click event for sector: " + sector);
       $('div.' + sector).on("click", function(e){
           console.log("Clicked sector: " + sector);
       });
    })(s);   //Calls the function
}

This way the inner s is not 'shared' and each loop cycle will have its own copy, so it does not get overwritten.

Hope this helps. Cheers

score 2 · Answer 3 · answered Jan 12 '14 at 02:07

2

It is a known issue with using closure in a loop

$.each(sectorArray, function (i, sector) {
    console.log("Adding click event for sector: " + sector);
    $('div.' + sector).on("click", function (e) {
        $selection.html(sector);
        console.log("Clicked sector: " + sector);
    });
})

answered Jan 12 '14 at 02:07

Arun P Johny

384,651
66
527
531

Thank you, that link was helpful in explaining it! – Luke Jan 12 '14 at 02:16

score 2 · Answer 4 · answered Jan 12 '14 at 02:28

You can also make a function which returns the the event handler function, pass in the sector and execute it immediately like this:

$('div.' + sector).on("click", 
  function(sec){
    return function(e) {
      console.log("Clicked sector: " + sec);
    };
  }(sector)
);

How to loop over an array and add jQuery click events?

4 Answers4