Question

I’m trying to attach a dynamic .change() function to a list of elements:

els = new Array('#element1','#element2');

for (i=1; i < 3; i++){
    $(els[i]).change(function(){
        alert(i);
    });
}

This does not work as desired because i is not passed into the function, but is instead always equal to the last iteration, ie, 2. How do I pass a value into the change(function{})?

Answer 1

Two ways of doing this.

Use $.each

var element_array = new Array('#element1','#element2');

$.each( element_array, function( index, value ){ 
    $(value).change(function(){ 
        alert( index ); 
    }); 
});

Create a closure.

var element_array = new Array('#element1','#element2');

for ( i = 0; i < element_array.length; i++){
    (function(i){
        $(element_array[i]).change(function(){
            alert(i);
        });
    })(i);
}