current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite
1

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 ?

share|improve this question
    
A classical one:) I guess this has been asked a dozen times on SO. –  Christoph Sep 18 '12 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 completed and i is equal to number_of_banners. (Only a dozen @Christoph? Probably at least a dozen this month...) –  nnnnnn Sep 18 '12 at 6:07
    
possible duplicate of Assign click handlers in for loop –  givanse Feb 10 at 22:14

5 Answers 5

up vote 2 down vote accepted

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

share|improve this answer
up vote 3 down vote

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

For instance:

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:

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

share|improve this answer
1  
It's not a hoisting issue, and the scoping issues discussed in the article you link to don't really cover it either. It's more a closure issue (noting though that i is global in the question), and your second fiddle illustrates one way to get it to work - why don't you update your answer to talk about why it works? –  nnnnnn Sep 18 '12 at 6:12
    
@nnnnnn Uhps, sorry, you're right. As I just quickly posted this answer I wrongly added the hoisting stuff, which of course is more a scoping problem (due to the JavaScript function rather than block scope) as you correctly mentioned. I'll update my answer –  Juri Sep 18 '12 at 21:49
    
+1 for the second example of variable binding...... Though an answer that mentions hoisting shouldn't have var statements anywhere but on the first line of a function ;) –  Peter Ajtai Oct 24 '12 at 6:24
up vote 4 down vote

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

share|improve this answer
    
+1 nice and clean –  Christoph Sep 18 '12 at 8:18
    
@Christoph thanks, mate. –  thecodeparadox Sep 18 '12 at 8:41
up vote 1 down vote

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

share|improve this answer
    
You can also assign a class to your banners and bind the listener to the class! I love jQuery! :D –  nmenego Sep 18 '12 at 5:38
    
@nmenego yeah, but the author has ids. –  voigtan Sep 18 '12 at 5:40
up vote 1 down vote

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);
}
share|improve this answer
    
That won't work: that function is a callback for the click handler, and jQuery doesn't know to pass that i value in when it calls the function. –  nnnnnn Sep 18 '12 at 6:06
    
@nnn it may work if he puts the func around the handler binding and not inside. –  Christoph Sep 18 '12 at 6:48

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.