javascript - Javascript，将EventListener添加到循环中动态创建的元素..为什么这不起作用？

Question

运行一个 for 循环来创建多个 ID 为 at1、at2、at3 等的 div。

    function maketiles() {
        for (i = 1; i < 7; i++) {
            var div = document.createElement('div');
            div.id = "at" + i;
            $("tiles").appendChild(div);
        }
    }

然后我向每个 div 添加EventListener，以便可以单击它们以调用另一个函数并将唯一编号（与它们的 ID 相同的编号）传递给所述函数。

如果我像这样单独添加它们：

        $("at1").addEventListener("click", function () { build(1) });
        $("at2").addEventListener("click", function () { build(2) });
        $("at3").addEventListener("click", function () { build(3) });
        $("at4").addEventListener("click", function () { build(4) });
        $("at5").addEventListener("click", function () { build(5) });
        $("at6").addEventListener("click", function () { build(6) });

它工作正常。但是在循环中只添加一行会更有效，如下所示：

    function maketiles() {
        for (i = 1; i < 7; i++) {
            var div = document.createElement('div');
            div.id = "at" + i;
            $("altartiles").appendChild(div);
            $(div.id).addEventListener("click", function () { build(i) });
        }

然而那是行不通的。似乎问题出在 i 变量上。它不会变成它包含的 1、2、3..。有什么办法可以使这项工作？

PS如果不清楚，我有

    var $ = function (id) { return document.getElementById(id); };

设置，就像 jquery 一样。

标签： javascriptcss