Question

Possible Duplicate:
Javascript: closure of loop?

I have following code inside javascript:

for (var i=0; i < images_array.length; i++) {
$('#thumb_'+ i).live('click', function(){
    $('#image_container_' + current_image_index).hide();
    current_image_index = i;
    alert(current_image_index);
    $('#image_container_' + current_image_index).show();
});}

when I click on any thumb, i get images_array.length value. Does anyone know what is happenning?

Answer 1

You need to create a closure for the click handler function, like this:

for (var i=0; i < images_array.length; i++) {
    $('#thumb_'+ i).live('click', 
        (function(i) {
            return function(){
                $('#image_container_' + current_image_index).hide();
                current_image_index = i;
                alert(current_image_index);
                $('#image_container_' + current_image_index).show();
            }
        })(i)
    );
}

The problem is that, without the closure, the variable is shared across every handler function — it continues getting updated, which is why every handler ends up getting the array.length value. Using the closure creates a locally-scoped copy of the variable i.

Here’s a demo that shows the difference:

• Original
• With closure