Question

我需要在文档中添加一些按钮并让它们调用getTest()函数。因此，1个按钮应调用getTest(1)，第2个按钮调用getTest(2)，依此类推。但是一旦脚本完成，事件监听器只会附加到循环中的最后一个按钮。

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;
        }
    }

我该如何处理？如何将事件监听器附加到我创建的每个按钮上？

Answer 1

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

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

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

你真的应该使用document.createElement来直接将事件附加到元素而不是通过更慢的DOM。

另外，innerHTML是不可变的，你每做+=，在每次迭代时重新创建整个批次，你正在销毁旧的/前一个元素并重新添加它们但没有它们的事件处理程序！

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

1 个答案: