javascript - 为什么数组的最后一个元素仅在 Javascript 中为 onClick 填充

Question

我正在循环访问一系列对象，并且遇到奇怪的行为。这是我的代码:

  window.onload = function () {

    document.getElementById('btnAdd').onclick = function () {
        add("button");
    };
    function add(type) {
        var names = {};
        names['one'] = { id: "Button 1",msg:"#1" };
        names['two'] = { id: "Button 2", msg: "#2" };
        names['three'] = { id: "Button 3", msg: "#3" };
        //Create an input type dynamically.
        function addOnClick(element, currentName) {
              element.onClick = function () {
                 alert("button is " + names[currentName].msg);
            };
          };       

        for (name in names) {
            var element = document.createElement("input");

            element.type = type;
            element.value = names[name].id; 
            element.name = name;  
             addOnClick(element,name);

            var foo = document.getElementById("fooBar");
            //Append the element in page (in span).  
            foo.appendChild(element);
        }
    }
};

这是 html:

 <p>
<input type="button" id="btnAdd" value="Add Buttons" />
<p id="fooBar">Buttons:   </p>

</p>

如果您在浏览器和“添加按钮”按钮中运行此命令，则会创建 3 个按钮并相应命名。但是，如果您单击 3 个新按钮之一，警报框总是显示“按钮是#3”，我不知道为什么。有人可以解释为什么 onClick 事件只记住数组中的最后一项吗？谢谢

Answer 1

你正在成为 JavaScript 中闭包捕获规则的牺牲品。 name 只有一份副本，当 onclick 触发时，它将是集合 names 中的最后一个 name 值。为了解决这个问题，您需要创建一个新的 function 范围来捕获 name

的当前值

var addOnClick = function(currentName) { 
  element.onclick = function() { 
    alert("button is " + names[currentName].msg);
  };
};
addOnClick(name);

编辑

您还需要使用onclick而不是onClick。案例很重要

Fiddle: http://jsfiddle.net/Nzf3p/