javascript - 向循环内的元素添加事件 - JScript/Closures

Question

我正在构建一个按钮列表，我希望每个按钮都能使用当前的 members[member].id 触发 addForm() 函数。

但碰巧只有最后一个按钮会触发事件。

我知道它与闭包有关，如您所见，我已调整函数以使用此模式。

我做错了什么？

function displayConnections(connections) {
    /*(...)*/

    for (var member in members) {

        connectionsDiv.innerHTML += "<p>" + members[member].firstName + " " + members[member].lastName
        + " ID: " + members[member].id;

        btn = document.createElement("input");
        btn.setAttribute("type","button");
        btn.setAttribute("value","Send Message");
        btn.setAttribute("id",members[member].id);

        btn.onclick = function (id) {
            return function () {
                addForm(id);
            };
        }(members[member].id);

        connectionsDiv.appendChild(btn);

    }     
}

谢谢。

Answer 1

首先，请记住您不是在编写 C# 或 Java。 for (var ... in ...) 结构不会迭代集合。您应该始终检查 hasOwnProperty 以查看属性名称是否属于对象本身:

if (!members.hasOwnProperty(member)) continue;

然后检查以确保属性值是对象而不是函数等。

其次，您的变量 btn 缺少 var 声明。您正在创建一个名为 btn 的全局变量，而不是函数的局部变量。

接下来，您的原始代码中存在拼写错误。您的原始代码实际上是这样解释的(感谢 JavaScript 的自动分号插入功能!):

btn.onclick = function (id) {
    return function () {
        addForm(id);     <-- this id is now the click event's event object, not what you want
    };
};
(members[member].id);   <-- this line will have no side effect

为了以您原来的风格运行您的程序，您需要将函数定义括起来:

btn.onclick = (function (id) {
    return function () {
        addForm(id);
    };
})(members[member].id);