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

我正在构建一个按钮列表，希望每个按钮都能使用当前成员[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);

    }     
}

谢谢

for (var i = 0; i < 10; i++) {

    // Won't work
    //$('div').eq(i)[0].onclick = function() { alert(i) }; // 10


    $('div').eq(i)[0].onclick = (function(id) {
        return function() {
            alert(id)
        };
    })(i);
}

---

.

首先，请记住您不是在编写C或Java。为变量。。。在里面结构不会迭代集合。您应该始终检查hasOwnProperty，以查看属性名称是否属于对象本身：

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

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

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

接下来，您的原始代码中有一个打字错误。由于JavaScript的自动分号插入功能，您的原始代码实际上是以这种方式解释的！：

---

首先，请记住，您不是在编写C或Java。为变量。。。在里面结构不会迭代集合。您应该始终检查hasOwnProperty，以查看属性名称是否属于对象本身：

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

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

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

接下来，您的原始代码中有一个打字错误。由于JavaScript的自动分号插入功能，您的原始代码实际上是以这种方式解释的！：

在这段代码中：

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

您的语法错误-应该是：

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

这将自动调用一个新的匿名闭包，该闭包在其id参数中有一个本地绑定的members[member].id副本，然后它本身返回一个实际绑定到btn.onclick的闭包

只有在闭包声明周围加上外括号时，才会发生自动调用。

在这段代码中：

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

您的语法错误-应该是：

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

这将自动调用一个新的匿名闭包，该闭包在其id参数中有一个本地绑定的members[member].id副本，然后它本身返回一个实际绑定到btn.onclick的闭包

---

只有在闭包声明周围加上外圆括号时，才会发生自动调用。

那么，除了这些解决方法之外，您还可以使用：

element.setAtrribute('onClick', 'javascript:functionName(' + parameter + ');');

---

这对我有用，也应该对你有用。

好吧，除了这些解决方法，你还可以使用：

element.setAtrribute('onClick', 'javascript:functionName(' + parameter + ');');

---

这对我有用，也应该对你有用。

我认为你简化闭包-成员[member]是错误的。id将在循环的每次传递中继续更改。此更正仍然会给我触发事件的最后一个按钮。我认为你简化闭包-成员[member]是错误的.id将在每次通过循环时继续更改。此更正仍然为我提供触发事件的最后一个按钮。通过更正，只有最后一个按钮才会触发事件。通过更正，只有最后一个按钮才会触发事件。