为什么总是在循环中使用对象的最后一个引用？

Question

assemblyEl已正确创建（1.jpg，2.jpg，3.jpg），但ajax请求始终发送最后一个ID（3）。

为什么会发生这种情况以及如何解决？

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

因为单击元素时会触发click事件。到发生这种情况时，assembly的值是循环中的最后一个值。

使用闭包将值复制到新范围。

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

.click(clickHandler(assembly));