jQuery绑定到元素的顺序？

Question

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

当我遍历每个 JSON 项时，我会这样做（为清晰起见进行了编辑）：

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