i have the following code :

$(document).ready(function () {
    for (i = 1; i <= number_of_banners; i++) {
    var selector = "#link_" + i;
    $(selector).click(function () {
        alert(i);
        });
    }
});

but the alert() can't get the "i" variable from the for loop. How can I use the i variable of for loop inside the .click function ?

i have the following code :

$(document).ready(function () {
    for (i = 1; i <= number_of_banners; i++) {
    var selector = "#link_" + i;
    $(selector).click(function () {
        alert(i);
        });
    }
});

but the alert() can't get the "i" variable from the for loop. How can I use the i variable of for loop inside the .click function ?

• javascript
• jquery
• web
• nested
• scope

• A classical one:) I guess this has been asked a dozen times on SO. – Christoph Commented Sep 18, 2012 at 6:05
• 1 The problem you're having is that the .click() handlers are using the i variable from the for loop - but all of them are referencing the same, live i variable and by the time clicks occur the for loop has pleted and i is equal to number_of_banners. (Only a dozen @Christoph? Probably at least a dozen this month...) – nnnnnn Commented Sep 18, 2012 at 6:07
• possible duplicate of Assign click handlers in for loop – givanse Commented Feb 10, 2014 at 22:14

5 Answers 5

you can use this code :

$(document).ready(function () {
    for (var i = 1; i <= number_of_banners; i++) {
        var selector = "#link_" + i;
        $(selector).on('click', {id: i}, function (e) {
            alert(e.data.id);
        });
    }
});

you should use on method and use click argument in it instead of using onclick method

Using jQuery .on(event, data, handler) you can do it easily.

$(document).ready(function () {
    for (var i = 1; i <= number_of_banners; i++) {
        var selector = "#link_" + i;
        $(selector).on('click', {id: i}, function (e) {
            alert(e.data.id);
        });
    }
});

Working sample

Might this happen be due the fact of the JavaScript hoisting JavaScript Scoping mechanism??

For instance:

• example of wrong loop variable binding

doesn't work as JavaScript uses function scope rather than block scope as we're usually accustomed from other languages like Java and C#. In order to make it work, one has to create a new scope by explicitly creating a new anonymous function which then binds the according variable:

• example of correct loop variable binding

I know this doesn't directly answer the question above, but might still be useful though for others stumbling over this question.

I think you can pass it as a parameter into the anonymous function as long as the function is declared within a scope that can access i.

function (i) {
   alert(i);
}

a quick solution would be to use the eventData and store the current i in that:

$(document).ready(function () {
    for (var i = 1; i <= number_of_banners; i++) {
        var selector = "#link_" + i;
        $(selector).bind('click', i, function (e) {
            alert(e.data);
        });
    }
});

if you are using jquery 1.7+ then use on instead of bind