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

      });

    })

})

假设profiles数组的长度为2，那么它只是获得＆＃34; addEventListener＆＃34;的最后一个元素。即使我说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循环。

我不好意思，不包括那个，感谢帮助人员！

动态点击事件监听器

1 个答案: