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

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

因为单击元素时会触发单击事件。到那时，assembly 的值是循环中的最后一个值。

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

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

.click(clickHandler(assembly));