for 循环中的 addEventListener 始终添加到最后一项

addEventListener in for loop adds always to last item

本文关键字：最后 一项 添加 循环 addEventListener for      更新时间：2023-09-26

我目前正在编写一个chrome扩展，所以不要介意"chrome.*"代码。

现在，我面临一个问题，我不知道如何解决这个问题（尝试了我在谷歌上能找到的所有东西）。

这是我的函数：

function tabwlwatchlist() {  
document.getElementById('watchlisttable').innerHTML = "";
chrome.storage.local.get('movienames', function (resultnames) {
    chrome.storage.local.get('movielinks', function (resultlinks) {
        for (var j=0; j<resultnames.movienames.length; j++) {
            (function () {
            document.getElementById('watchlisttable').innerHTML += '<tr><td><h3 class="article_preview"><a href="' + resultlinks.movielinks[j] + '" target="_blank"><span>' + resultnames.movienames[j] + '</span></a></h3></td><td><h3 class="article_preview"><span id="wlt' + j +'">entfernen</span></h3></td></tr>'; 
            console.log("test");
            document.getElementById('wlt' + j).addEventListener("click", function(){
                alert('works');
            }, false);
            console.log("test2");
        }())
        }
    });
});
document.getElementById('lasthd').style.display = "none";
document.getElementById('lastserien').style.display = "none";
document.getElementById('watchlisttab').style.display = "block";
}

事件侦听器总是添加到 for 循环的最后一个元素。

有什么想法吗？ ：/

执行 for 循环后，您的 j 值已成为高度数。要解决它，你必须知道一个常见的JavaScript现象，称为闭包。为了防止这种情况，您必须为立即调用的函数提供参数j。您可以在此处了解有关它们的更多信息，输入链接说明

function tabwlwatchlist() {  
document.getElementById('watchlisttable').innerHTML = "";
chrome.storage.local.get('movienames', function (resultnames) {
    chrome.storage.local.get('movielinks', function (resultlinks) {
        for (var j=0; j<resultnames.movienames.length; j++) {
            (function (j) {
            document.getElementById('watchlisttable').innerHTML += '<tr><td><h3 class="article_preview"><a href="' + resultlinks.movielinks[j] + '" target="_blank"><span>' + resultnames.movienames[j] + '</span></a></h3></td><td><h3 class="article_preview"><span id="wlt' + j +'">entfernen</span></h3></td></tr>'; 
            console.log("test");
            document.getElementById('wlt' + j).addEventListener("click", function(){
                alert('works');
            }, false);
            console.log("test2");
        }(j))
        }
    });
});
document.getElementById('lasthd').style.display = "none";
document.getElementById('lastserien').style.display = "none";
document.getElementById('watchlisttab').style.display = "block";
}
相关文章：