いつもオブジェクトへの最後の参照がループで使われるのはなぜですか？

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