Using an anonymous function wrapper to persist the iterator properly

from jquery ninja book

by dandoyon

HTML

<button>Button 1a</button>
<button>Button 2a</button>
<p/>
<input type="button" value="Button 1b"/>
<input type="button" value="Button 2b"/>

JavaScript

// below code does not work properly, i is always = 2 (its last value when loop completes)
var buttons = document.getElementsByTagName("button");
for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener("click", function() {
        alert("button #" + i + " was clicked.");
    }, false);
}

// correct way of handling
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++)(function(i) {
    inputs[i].addEventListener("click", function() {
        alert("input #" + i + " was clicked.");
    }, false);
})(i);