javascript - 动态点击事件监听

Question

我在动态事件监听器循环方面遇到一些问题，如下所示:

profiles.forEach(function(item, i) {

    document.getElementById("test-" + i).addEventListener("click", function() {

      chrome.tabs.query({currentWindow: true, active: true}, function (tab) {

        chrome.tabs.update(tab.id, {url:  `https://example.com/profile/${item.platform}/${item.region}/${item.username}`})

      });

    })

})

假设配置文件数组的长度为 2，那么它只是获得“addEventListener”函数的最后一个元素，即使我说 ID 的 test-0 和 test-1 应该获得附加的事件监听器，因为循环运行两次，索引分别为 0 和 1。

我读过一些有关闭包的内容，但由于与正常的 for 循环相比，这已经在函数内，所以我不确定问题可能是什么。

我将不胜感激任何帮助!

Answer 1

我发现了这个问题，我在循环中遗漏了一个非常重要的部分，在尝试解决问题时忘记添加到帖子中。

链接 test-0 和 test-1 已附加到第二行循环中的 DOM。

profiles.forEach(function(item, i) {
content.innerHTML += item.column + item.html + "</div>"

document.getElementById("test-" + i).addEventListener("click", function() {

  chrome.tabs.query({currentWindow: true, active: true}, function (tab) {

    chrome.tabs.update(tab.id, {url:  `https://example.com/profile/${item.platform}/${item.region}/${item.username}`})

    });

  })
})

因此，我在第一个 for 循环之后创建了一个单独的 for 循环，将点击事件附加到链接。

我很抱歉没有包括这一点，谢谢你们的帮助!