Question

I have a code similar to this:

$.ajax({
        success: function(data) {
            text = '';
            for (var i = 0; i< data.length; i++) {
                text = text + '<a href="#" id="Data_'+ i +'">' + data[i].Name + "</a><br />";
            }            
            $("#SomeId").html(text);

            for (var i = 0; i< data.length; i++) {
                $("#Data_"+i).click(function() {
                    alert(data[i]);
                    RunFunction(data[i]);
                    return false;
                });                
            }
        }
    });

This gets an array of some data in json format, then iterates through this array generating a link for each entry. Now I want to add a function for each link that will run a function that does something with this data. The problem is that the data seems to be unavailable after the ajax success function is called (although I thought that they behave like closures). What is the best way to use the queried json data later on? (I think setting it as a global variable would do the job, but I want to avoid that, mainly because this ajax request might be called multiple times)

Thanks.

Answer 1

Your problem is that the i variable is shared by the callbacks.

Therefore, all of the callbacks run on the last item.

The simplest solution is to use $.each:

$.each(data, function(i) {
  $("#Data_" + i).click(function() {
    alert(data[i]);
    RunFunction(data[i]);
    return false;
  });
});

This will make a separate function call for each iteration, so there will be a separate i variable (or, in this case, parameter) for each iteration.