Refer back to old iterator value in click() function for javascript/jQuery (closure question)

Question

I'm trying to get the "click()" function to display the value of 'i' at the time I passed in the function. But its referring back to the value of 'i' after it finished. I'm drawing a blank on how to get the function to refer to the value of 'i' when I first passed the function in.

for( var i=0; i<10; i++){
 var ts = $('#<span></span>').clone().click(function(){
  alert(i);
 });
}

NOTE:

The '#' shouldn't be there, neither should the '.clone()'

Answer 1

You need to move the body of the loop to a separate function that takes i as a parameter.

You can use a normal function, like this:

for(var i=0; i<10; i++) {
    makeCopy(i);
}

function makeCopy(i) { 
    var ts = $('#<span></span>').clone().click(function(){
        alert(i);
    });
}

You can also use an inline method, like this: (beware confusing syntax)

for(var i=0; i<10; i++) {
    (function(i) { //Note i parameter
        var ts = $('#<span></span>').clone().click(function(){
            alert(i);
        });
        ...
    })(i);         //Note i parameter
}

Answer 2

Something like this will work:

for(var i=0; i<10; i++){
  (function(j) {
    var ts = $('<span></span>').click(function(){
        alert(j);
    });
  })(i);
}

You can give it a try here. Though, your creation is a bit off, I'm not sure why you'd want to create a new element just to clone it, and there's an extra # in there....I removed both of these above, but it doesn't affect the solution of an inner function.