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

Javascript for循环中的addEventListener始终添加到最后一项,javascript,for-loop,addeventlistener,Javascript,For Loop,Addeventlistener,我目前正在编写一个chrome扩展,所以不要介意“chrome.*”代码 现在,我正面临一个问题,我不知道如何解决这个问题(尝试了所有我能在谷歌上找到的东西) 这是我的职责: function tabwlwatchlist() { document.getElementById('watchlisttable').innerHTML = ""; chrome.storage.local.get('movienames', function (resultnames) { chrome

我目前正在编写一个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";
}
函数tabwlwatchlist(){
document.getElementById('watchlisttable')。innerHTML=“”;
chrome.storage.local.get('movienames',函数(resultnames){
chrome.storage.local.get('movielinks',函数(resultlinks){

for(var j=0;j在执行for循环后,您的j值已成为高度数……要解决此问题,您必须了解一种称为closure的常见javascript现象。要防止这种情况,您必须向立即调用的函数提供参数
j
。您可以了解更多关于它们的信息

函数tabwlwatchlist(){
document.getElementById('watchlisttable')。innerHTML=“”;
chrome.storage.local.get('movienames',函数(resultnames){
chrome.storage.local.get('movielinks',函数(resultlinks){

for(var j=0;循环内部的jJavaScript闭包–简单的实用示例:在大多数(所有?)版本的IE中,使用innerHTML修改表元素将失败,请参阅。谢谢,我已经通过添加第二个for循环来管理它,因为“innerHTML”总是重写我的EventListener;)
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";
}