Question

I am binding a function to an html element.

there is some data in loop which is changing on each iteration

data = {
    networkId: networkId,
    network_avatar: network_avatar,
    network_user_name: network_user_name,
}

Here I am binding it:

$("#element"+i).bind(function(){ 
    change(data);
}

The function is:

function change(data){
    console.log(data);
}

There should be the different data in data variable on each iteration.

But the it always contains the content of last iteration.
Why jQuery changes the data that is already binded with change() function

Answer 1

First of all, don’t use global variables named “data” or “window” or anything else like this. If the declaration of your variable data is somewhere in vision area use “var” bareword.

When the event handler is called, it calls the “change” function and sending the current value of data in it. What you need, is to declare own data for each handler. And you should use “var” for it. Like:

$("#element"+i).bind(function(){
   var currentDataValue = new CopyData(data);
   change(currentDataValue);
}

function CopyData(object) {
   var data = {};
   for (var val in object)
      data[val] = object[val];
   return data;
}

I guess it should help. But i’m not too sure.