Weird value for counter variable in javascript [duplicate]

Question

Possible Duplicate:
Javascript infamous Loop problem?

For some reason I get "6" inside my function here for every div element:

for(var i = 1; i <= 5; i++){
  $('<div class="e-' + i + '"></div>').appendTo(something).click(function(){
    alert(i);  // <-- it's 6. wtf??
  });
}

instead of 1, 2, 3, etc.

The class on the other hand it appears to be correctly set..

What am I doing wrong?

Answer 1

Your for loop is being executed at page load time. The alert only fires when there's a click event which is happening after the for loop has finished. Hence the value of i is now 6.

1) Page loads, for loop does its stuff...

2) Sometime later a click event is fired. the value of i at this time is 6 because the forloop has already completed.

Answer 2

The problem is that you need to create a closure to capture the value of i at the time you bind the click function.

Try this:

for(var i = 1; i <= 5; i++)
{
  $('<div class="e-' + i + '"></div>')
    .appendTo(something)
    .click(function(value)
    { 
      return function() { alert(value) };
    }(i));
}