<!doctype html>
<html>
<head>
<meta charset="iso-8859-1">
<script src="lib/jquery-1.7.2.js"></script>
<title>The good and the bad closures in JavaScript</title>
<script>
$(function () {
init_page_bad_closure('testbed1');
init_page_good_closure('testbed2');
});
function init_page_bad_closure (id) {
var div = $('#'+id);
for (var i=1; i < 5; ++i) {
var link = $('<a href="#">Link '+id+' #'+i+'</a>');
var please_enclose_my_i = i;
link.click(function(){
alert("Click "+id+" "+please_enclose_my_i);
please_enclose_my_i++;
});
div.append(link).append('<br>');
}
div.append('<br>');
}
function init_page_good_closure (id) {
var div = $('#'+id);
for (var i=1; i < 5; ++i) {
(function (my_personal_i) {
var link = $('<a href="#">Link '+id+' #'+my_personal_i+'</a>');
link.click(function(){
alert("Click "+id+" "+my_personal_i);
my_personal_i++;
});
div.append(link).append('<br>');
})(i);
}
div.append('<br>');
}
</script>
</head>
<body>
<div id="testbed1"></div>
<div id="testbed2"></div>
</body>
</html>