javascript - 在处理事件监听器时，如何让 IIFE 记住变量的**每个**实例？

Question

我正在处理数量可能会发生变化的图像列表，因此固定 ID 和事件监听器并不实用。下面的代码使用正确的 ID 生成正确数量的按钮，但只有最后一个按钮具有功能事件监听器。

for (var i = 0; i < amount; i++) {
    !function(index) {

        if (items[index].classList.contains('current')) {
            document.getElementById('selectButtons').innerHTML += '<button id=\"bitems' + index + '\"> ⬤ <span class=\"offscreen\">Item ' + i + '</span></button>';
        } 
        else
        {
            document.getElementById('selectButtons').innerHTML += '<button id=\"bitems' + index + '\"> ◯ <span class=\"offscreen\">Item ' + i + '</span></button>';
        }

        document.getElementById('bitems' + index).addEventListener("click", function(ev) {
        alert("clicked");
        });

    }(i);
}

显然 IIFE 没有像预期的那样存储单个变量，但我不明白为什么。毕竟，这是循环中 IIFE 的全部目的。

如有任何帮助，我们将不胜感激。

Answer 1

IIFE 运行良好。实际上，每次更新 selectButtons 的 innerHTML 时，都会重新创建 DOM，并且所有附加到它的事件都消失了!

不是在每次迭代中更新 innerHTML，您可以将按钮附加到它，而不是像:

for (var i = 0; i < 10; i++) {
  !function(index) {
    var button = document.createElement("BUTTON");
    var t = document.createTextNode("Button" + index);
    button.appendChild(t);
    document.getElementById('selectButtons').appendChild(button);

    button.addEventListener("click", function(ev) {
      alert("clicked +" +index);
    });

  }(i);
}

请务必在其周围添加您需要的条件。