JavaScript click handler not working as expected inside a for loop [duplicate]
This is a classic JavaScript closure problem. Reference to the i
object is being stored in the click handler closure, rather than the actual value of i
.
Every single click handler will refer to the same object because there’s only one counter object which holds 6 so you get six on each click.
The workaround is to wrap this in an anonymous function and pass i as argument. Primitives are copied by value in function calls.
for(var i=1; i<6; i++) { (function (i) { $("#div" + i).click( function () { alert(i); } ); })(i);}
UPDATE
Or you can use 'let' instead var
to declare i
. let
gives you fresh binding each time. It can only be used in ECMAScript 6 strict mode
.
'use strict';for(let i=1; i<6; i++) { $("#div" + i).click( function () { alert(i); } ); }
The problem is that as you iterate through the loop, i
is incremented. It ends up with a value of 6. When you say alert(i)
you are asking javascript to tell you what the value of i
is at the time the link is clicked, which by that point is 6.
If you want to get the contents of the box instead you could do something like this:
for (var i = 1; i < 6; i++) { console.log(i); $("#div" + i).click(function(e) { alert($(this).text()); });}
Working example: http://jsfiddle.net/rmXcF/2/
$("#div" + i).click( function() { alert(i); });
It's because it's using the value of i
as a closure. i
is remembered through a closure which increases at every stage of the foor loop.
$("#div" + i).click(function(event) { alert($(event.target).attr("id").replace(/div/g, ""));});