Javascript 无法将事件侦听器附加到动态创建的按钮

我需要在我的文档中添加一些按钮，并使它们调用getTest函数。所以1个按钮应该调用getTest1，第2个按钮应该调用getTest2，依此类推。但是，一旦脚本完成，事件侦听器将只附加到循环中的最后一个按钮

window.onload = function() {
        var button_place = document.getElementById("buttons_here"); // get an element

        /* add the event listeners */
        var i = 0;
        while(i < 10) {
            var cur_i = i + 1;
            var current_but_name = "but_" + (i + 1);
            button_place.innerHTML += "<button class=button id='" + current_but_name + "'>" + cur_i + "</button>\n";
            var bu = document.getElementById(current_but_name);
            //bu.style.color = "#F00";

            bu.addEventListener("click", function() {
                getTest(cur_i);
            });

            ++i;
        }
    }

---

我该怎么处理呢？如何将事件侦听器附加到我创建的每个按钮？

这是因为附加的循环是同步的、完成的，并且cur_I的值始终是发生单击时迭代器的最后一个值。您需要将其包装到本地范围中

(function(cur_i){
    bu.addEventListener("click", function() {
        getTest(cur_i);
    });
}(cur_i));

这将确保该值在绑定时是正确的

您确实应该改用document.createElement，并将事件直接附加到元素，而不是通过DOM传递，这样会比较慢

---

此外，innerHTML是不可变的，您所做的每一次+=都会重新创建全部内容，因此在每次迭代中，您都会销毁旧的/以前的元素并重新添加它们，但没有它们的事件处理程序

这是因为附加的循环是同步的、完成的，并且cur_i的值始终是发生单击时迭代器的最后一个值。您需要将其包装到本地范围中

(function(cur_i){
    bu.addEventListener("click", function() {
        getTest(cur_i);
    });
}(cur_i));

这将确保该值在绑定时是正确的

您确实应该改用document.createElement，并将事件直接附加到元素，而不是通过DOM传递，这样会比较慢

---

此外，innerHTML是不可变的，您所做的每一次+=都会重新创建全部内容，因此在每次迭代中，您都会销毁旧的/以前的元素并重新添加它们，但没有它们的事件处理程序

+1。最后一部分回答了OP的原始问题，但第一部分解决了代码中的另一个问题。非常感谢，它帮助了我。我不懂语法：functionx{/*.*/}x是什么；意思是？@RomanChehowsky:这是一个。它基本上创建一个函数并立即执行。正如@Dimitar所说，它通过为循环的每个迭代创建一个单独的作用域来解决cur_i始终是最后一个值的问题。最后一部分回答了OP的原始问题，但第一部分解决了代码中的另一个问题。非常感谢，它帮助了我。我不懂语法：functionx{/*.*/}x是什么；意思是？@RomanChehowsky:这是一个。它基本上创建一个函数并立即执行。正如@Dimitar所说，它通过为循环的每个迭代创建一个单独的范围来解决cur_i始终是最后一个值的问题。