javascript - 在循环中添加 addEventListener() 仅适用于最后一个按钮

Question

我从 dynamodb 得到一个 json 数组，并在遍历它时将 addEventListener() 添加到按钮。但只有最后一个按钮对此做出响应。

这是asked before在 SO 上并且是谷歌的第一次点击所以我改变了循环以使用闭包。但是除了最后一个按钮，我仍然无法将 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(j) {
    document.getElementById('yay_button_' + j).addEventListener('click', function() {
        alert('id: ' + j);
    });
}(i));

另一个variant我尝试使用 new 创建一个按钮:

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，yay_button_0 和 _1。

Answer 1

主要问题是每次迭代时都完全重新定义adiv 的HTML。这意味着您已经绑定(bind)到 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);
    });
}

如果你的浏览器不支持ES2015 (for let)，那么你可以使用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));
}