Why always the last reference to the object is used in loop?

Question

The assemblyEl is created correctly(1.jpg, 2.jpg, 3.jpg), but the ajax request always sends the last id(3).

Why this happens and how to fix it?

var assemblies = [{id:1},{id:2},{id:3}];

for (var a in assemblies) {
    var assembly = assemblies[a];

    var assemblyEl = $('<img src="' + assembly.id + '.jpg" />')
                        .click(function () {
                                 $.ajax({
                                     type: "POST",
                                     url: url,
                                     data: { id: assembly.id },
                                     async: false,
                                     success: function (data) {
                                     }
                                 });
                         });
}

Please, stop using `for...in` loops on arrays. They're slow and unstable. — , Jul 06 '11 at 15:45

score 1 · Accepted Answer · answered Jul 06 '11 at 15:42

1

Because the click event fires when the element is clicked. By the time that happens, the value of assembly is the last value in the loop.

Use a closure to copy the value to the new scope.

function clickHandler(assembly) {
    return function () {
         $.ajax({
              type: "POST",
              url: url,
              data: { id: assembly.id },
              async: false,
              success: function (data) {
              }
          });
    };
}

.click(clickHandler(assembly));

answered Jul 06 '11 at 15:42

Quentin

914,110
126
1,211
1,335

but the 'click' happens after the creation of the elements – theateist Jul 06 '11 at 15:45
You can also do something like this: http://stackoverflow.com/questions/2192348/closures-in-a-for-loop. Internally a closure is made, too. – Arxisos Jul 06 '11 at 15:46

Why always the last reference to the object is used in loop?

1 Answers1

Linked

Related