javascript - 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) {
                                     }
                                 });
                         });
}

Answer 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));