爲什麼總是在循環中使用對象的最後一個引用？

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