Question

My javascript loop is not working properly. I am getting only the final value of $i.

$(function() {
    var $count = $('#count').val();
    for (var $i = 1; $i < $count; $i++) {
        var btnRemove = $('#removeImage' + $i);
        var profilepictureid = $('#profilePitcureID' + $i).val();
        btnRemove.click(function() {
            alert($i);
        });
    }
});​

Answer 1

By the time your click event handler executes, $i has reached it’s final value ($count - 1). You need to capture the value of $i at each iteration of the loop. You can do this by introducing a closure that “closes over” the value of $i at each iteration:

for(var $i=1; $i<$count; $i++) {
    var btnRemove=$('#removeImage'+$i); 
    var profilepictureid = $('#profilePitcureID'+$i).val();

    (function ($i) {
        btnRemove.click(function(){
            alert($i);
        });
    }($i));
}