Javascript 在循环中添加addEventListener（）仅适用于最后一个按钮

我从dynamodb获得一个json数组，并在遍历按钮时向按钮添加addEventListener（）。但只有最后一个按钮对此做出响应

这是google的第一次成功，所以我将循环改为使用闭包。但除了最后一个按钮外，我仍然无法将addEventListener（）附加到其他按钮

我最初试过：

for (var i = 0; i < array_length; ++i) {
    (function(j) {
        var obj = data.Items[j];

        adiv.innerHTML = adiv.innerHTML + "<div class='row'><div class='center-div six columns'>" + obj.Event + ", " + obj.Location + "</div></div>";
        adiv.innerHTML = adiv.innerHTML + "<div class='row'><div class='center-div six columns'>" + obj.Date + ", " + obj.Time + "</div></div>";
        adiv.innerHTML = adiv.innerHTML + "<div class='row'><div class='center-div six columns'><button id='yay_button_" + i + "' class='button-primary'>Deltag</button></div></div>";

        var elem = document.getElementById('yay_button_' + j);
        elem.addEventListener('click', function() {
            alert('id: ' + j);
        });
    })(i);
}

我尝试的另一个方法是使用新的

function Button(id, number) {
    document.getElementById(id + number).addEventListener('click', function() {
        alert('click: ' + id + number);
    });
}

new Button('yay_button_', i);

---

我在el capitan上尝试了safari和chrome，在控制台中没有出现错误。当我检查按钮时，它的id是正确的，是按钮0和按钮1。

主要问题是每次迭代时，您都会完全重新定义

adiv

的HTML。这意味着您已经绑定到

adiv

的子元素的任何事件处理程序在执行

adviv.innerHTML=…

时都将丢失。虽然您分配了相同的HTML加上一些新的HTML，但是您没有分配以前定义的事件处理程序。所以他们迷路了

只有您在上一次迭代中分配的事件处理程序不会以这种方式销毁

解决方案 快速解决方案是首先循环创建所有HTML，然后执行单独的循环来分配事件处理程序：

// First add all the new content:
var html = adiv.innerHTML;
for (var i = 0; i < array_length; ++i) {
    var obj = data.Items[i];

    html += "<div class='row'><div class='center-div six columns'>" + obj.Event + ", " + obj.Location + "</div></div>";
    html += "<div class='row'><div class='center-div six columns'>" + obj.Date + ", " + obj.Time + "</div></div>";
    html += "<div class='row'><div class='center-div six columns'><button id='yay_button_" + i + "' class='button-primary'>Deltag</button></div></div>";
}
adiv.innerHTML = html;

// Now bind the event handlers
// By using "let" instead of "var" the right value is retained
// in the handlers
for (let i = 0; i < array_length; ++i) {
    var elem = document.getElementById('yay_button_' + i);
    elem.addEventListener('click', function() {
        alert('id: ' + i);
    });
}

---

在trincot善意的建议下，我穿越了两次阵列。首先生成html，然后应用addEventListener（）。第二次调用addEventListener（）时，我使用闭包

for (var i = 0; i < array_length; ++i) {
    var obj = data.Items[i];

    adiv.innerHTML = adiv.innerHTML + "<div class='row'><div class='center-div six columns'>" + obj.Event + ", " + obj.Location + "</div></div>";
    adiv.innerHTML = adiv.innerHTML + "<div class='row'><div class='center-div six columns'>" + obj.Date + ", " + obj.Time + "</div></div>";
    adiv.innerHTML = adiv.innerHTML + "<div class='row'><div class='center-div six columns'><button id='yay_button_" + i + "' class='button-primary'>Deltag</button></div></div>";

}

for (var i = 0; i < array_length; ++i) {
    var obj = data.Items[i];
    (function(j, event) {
        document.getElementById('yay_button_' + j).addEventListener('click', function() {
            alert('id: ' + j + ', ' + event);
        });
    }(i, obj.Event));
}

for（变量i=0；i

谢谢。你说得对。我也试过了，但没有结束。但是现在我用它做了一个额外的循环，它工作了。介意我编辑你的帖子并粘贴代码吗？我个人更喜欢

let

解决方案，而不是额外的闭包。但是你可以把它作为你自己的答案发布，这可能会引起未来访问者的兴趣。谢谢。我使用严格模式，不允许使用关键字let。”在严格模式下意外使用保留字“let”。我会发布一个答案。哦，好吧，我也使用严格模式，没有问题。我猜您是在Safari上，他还不符合ES2015语法。我使用

bind（）

添加了另一个选项。

for (var i = 0; i < array_length; ++i) {
    var elem = document.getElementById('yay_button_' + i);
    elem.addEventListener('click', function(i) {
        alert('id: ' + i);
    }.bind(null, i));
}

for (var i = 0; i < array_length; ++i) {
    var obj = data.Items[i];

    adiv.innerHTML = adiv.innerHTML + "<div class='row'><div class='center-div six columns'>" + obj.Event + ", " + obj.Location + "</div></div>";
    adiv.innerHTML = adiv.innerHTML + "<div class='row'><div class='center-div six columns'>" + obj.Date + ", " + obj.Time + "</div></div>";
    adiv.innerHTML = adiv.innerHTML + "<div class='row'><div class='center-div six columns'><button id='yay_button_" + i + "' class='button-primary'>Deltag</button></div></div>";

}

for (var i = 0; i < array_length; ++i) {
    var obj = data.Items[i];
    (function(j, event) {
        document.getElementById('yay_button_' + j).addEventListener('click', function() {
            alert('id: ' + j + ', ' + event);
        });
    }(i, obj.Event));
}