jQuery绑定到元素的顺序？

Question

我在使用jQuery将一个函数绑定到一个元素时遇到了一些困难。基本上我有一组使用JSON加载的div。每个JSON项目都有一个关联的“操作”，用于定义在单击该div时要调用的函数。

我走过每一个JSON项目的重复，我（editied为清楚起见）：

for (var i = 0; i < JSONOBJECT.length; i++) { 
    var divbox = $('<div id="' + i + '"><img /></div>'); 

    var action = JSONOBJECT[i]["action"]; 
    $(divbox).click(function() { 
     eval(action); // bind function 
    }); 

    $('.navigationarea').append(divbox); // Append to area 
} 

因此，例如，JSONOBJECT[0]["action"]可以包含"doThis()"，而JSONOBJECT[1]["action"]可以包含一个"doThis2()"。

问题是action总是最终成为与JSON对象中最后一项关联的操作。我知道这是一个与本地化变量（或制作副本？）有关的问题，但我错过了它。

我可以得到一些帮助吗？ 在此先感谢。

Answer 1

您的问题是action变量由所有匿名方法共享。

在您的具体情况下，最好的解决办法是编写divbox.click(new Function(action))。
这也会更快，因为代码只会被解析一次，而不是每次点击一次。

通常，解决方案是将包含匿名函数的代码放入单独的函数中，并将该变量作为参数传递给单独的函数。

编辑：您的代码可以写成这样：

for (var i = 0; i < JSONOBJECT.length; i++) { 
    $('<div id="' + i + '"><img /></div>') 
     .click(new Function(JSONOBJECT[i].action)) 
     .appendTo($('.navigationarea')); 
}