Javascript 动态单击事件侦听器

我对动态事件侦听器循环有一些问题，如下所示：

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}`})

      });

    })

})

假设profiles数组的长度为2，那么它只是最后一个元素获得了“addEventListener”函数，尽管我是说ID的test-0和test-1应该获得一个附加的事件侦听器，因为循环使用索引0和1运行了两次

我读过一些关于闭包的文章，但由于与普通for循环相比，闭包已经在函数中了，所以我不确定问题出在哪里

---

我将感谢任何帮助

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

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}`})

    });

  })
})

profiles.forEach（功能（项，i）{
content.innerHTML+=item.column+item.html+“”
document.getElementById（“test-”+i）.addEventListener（“单击”，函数）（）{
查询（{currentWindow:true，active:true}，函数（tab）{
chrome.tabs.update（tab.id，{url:`https://example.com/profile/${item.platform}/${item.region}/${item.username}`}）
});
})
})

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

---

我的不好，因为没有包括这些，谢谢大家的帮助

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

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}`})

    });

  })
})

profiles.forEach（功能（项，i）{
content.innerHTML+=item.column+item.html+“”
document.getElementById（“test-”+i）.addEventListener（“单击”，函数）（）{
查询（{currentWindow:true，active:true}，函数（tab）{
chrome.tabs.update（tab.id，{url:`https://example.com/profile/${item.platform}/${item.region}/${item.username}`}）
});
})
})

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

---

我的不好，因为没有包括这些，谢谢大家的帮助

您尚未说明问题所在。您得到的错误是什么？哦，问题是只有最后一个id（test-1）获得附加的事件侦听器，而循环中的第一个id（test-0）没有。不过，控制台中没有实际的错误@Harshakj89似乎工作得很好。您确定您的document.getElementById（“test-”+i）为您提供了正确的元素吗？@afterburn在将它们记录到控制台时，我确实获得了test-0和test-1。我可以看到你的例子是有效的，但我不知道为什么我没有得到同样的结果。这很奇怪，当你只是简单地把控制台日志而不是chrome的东西，这些消息会出现吗？你没有说明问题。您得到的错误是什么？哦，问题是只有最后一个id（test-1）获得附加的事件侦听器，而循环中的第一个id（test-0）没有。不过，控制台中没有实际的错误@Harshakj89似乎工作得很好。您确定您的document.getElementById（“test-”+i）为您提供了正确的元素吗？@afterburn在将它们记录到控制台时，我确实获得了test-0和test-1。我可以看到你的例子是有效的，但我不知道为什么我没有得到同样的结果。这很奇怪，当你只是简单地把控制台日志而不是chrome的东西，这些消息会出现吗？