jQuery and for javascript variable scope

Question

I'm try to add click event on a Jquery Element using variable "element"..

but the variable into each Event change when I change this variable outside the "click"

like that:

$(document).ready(function () {
    var counto = 5;
    for (i = 1; i <= counto; i++) {
        $('.link.' + i).click(function (event) {
            event.preventDefault();
            $('div.output').html(i);
        });
    }
});

sorry for my worse english :-)

Thank You

You're displaying `i` and since you omitted the `var` keyword `i` has the global scope. The value of `i` after your loop is 6. — Jonathan, Jun 14 '13 at 17:10
@Jonathan: Even if `i` was defined as `var i`, the problem would exist. — Felix Kling, Jun 14 '13 at 17:10
possible duplicate of [Javascript closure inside loops - simple practical example](http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) — Felix Kling, Jun 14 '13 at 17:11

Niccolò Campolungo · Accepted Answer · 2013-06-14T17:13:39.597

1

You have to include the script inside a scope:

$(document).ready(function () {
    var counto = 5;
    for (var i = 1; i <= counto; i++) { // do not omit the keyword var
        (function (n) {
            $('.link.' + n).click(function (event) {
                event.preventDefault();
                $('div.output').html(n);
            });
        })(i);
    }
});

Otherwise the click function will use the i variable when it's assigned to the last value of the loop(in this case 6).

edited Jun 14 '13 at 17:13

answered Jun 14 '13 at 17:04

Niccolò Campolungo

11,824
4
32
39

The solution is correct, but not the explanation. The event handler already *is* a closure and that is what is causing the problem. The solution is to create a new scope by executing a function, not by using a "closure" (closures don't create scope). – Felix Kling Jun 14 '13 at 17:12

jQuery and for javascript variable scope

1 Answers1