Untitled

<!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>