jQuery 函数使用最新值而不是创建时存在的值

Question

我有以下代码:

$(document).ready(function() {
   var $body = $("body");
   for (var i = 0; i < 10; i++)
   {
       var $a = $("<a>");
       $body.append($a);
       $a.text(i);

       $a.click(function() {
           alert(i);
       });  
   }
});

单击任何 anchor 都会提醒数字 10，而我本希望它会提醒创建函数时的 i 值。

为了让它工作，我刚刚使用 data 将 ID 附加到 anchor ，然后在函数中检索它，但这看起来真的很困惑。为什么创建函数时不能指定值？

Fiddle here.

Answer 1

您需要使用闭包，因为 i 的值会更改，直到变为 10，并且该函数没有 i 的本地副本，它使用已更改为 10 的外部函数范围内的 i :

$(document).ready(function() {
   var $body = $("body");
   for (var i = 0; i < 10; i++)
   {
       var $a = $("<a>");
       $body.append($a);
       $a.text(i);

       $a.click((function(i){ return function() {
               alert(i);
           }
       })(i));  
   }
});

Updated Fiddle