This question already has an answer here:
For example, I have 10 a tags generated from an AJAX response:
<a href="#" id="b1">b1</a>
<a href="#" id="b2">b2</a>
<a href="#" id="b3">b3</a>
<a href="#" id="b4">b4</a>
<a href="#" id="b5">b5</a>
<a href="#" id="b6">b6</a>
<a href="#" id="b7">b7</a>
<a href="#" id="b8">b8</a>
<a href="#" id="b9">b9</a>
<a href="#" id="b10">b10</a>
I need to assign onclick event to each of them via loop:
for(i=1; i<11; i++) {
document.getElementById("b"+i).onclick=function() {
alert(i);
}
}
This doesn't work, it only assigns onclick to the last a tag and alerts "11". How can I get this to work? I'd prefer not to use jQuery.
All of your handlers are sharing the same
i
variable.You need to put each handler into a separate function that takes
i
as a parameter so that each one gets its own variable:A closure is what you're looking for:
There are two ways to use closure on this problem. The idea is to create a scope with a snapshot of "i" variable for each iteration to be used by event handler.
Solution #1 (as was mentioned by Kevin):
Solution #2: