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

我目前正在编写一个chrome扩展，所以不要介意“chrome。*”代码。for循环中的addEventListener始终添加到最后一项

现在，我面临一个问题，我不知道如何解决这个（什么都试过了我能找到谷歌）..

这是我的函数：

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"; 
}

的EventListener总是添加到for循环的最后一个元素。

任何想法？：/

来源

2015-01-11 Zazama

JavaScript的闭包内环路 - 简单实用的例子：http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-示例 –

使用* innerHTML *修改表元素将在大多数（所有？）版本的IE中失败，请参阅[* MSDN *]（http://msdn.microsoft.com/zh-cn/library/ie/ms533897（v = vs.85）的.aspx）。 – RobG

你的j值已经成为for循环执行后的高度数....要解决它，你必须知道一个常见的JavaScript现象，称为闭包。为了防止这个，你必须提供参数j立即调用function.You可以了解他们enter link description here

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"; 
}

来源

2015-01-11 00:59:06

谢谢，我已经通过添加第二个循环来管理它，因为“innerHTML”总是覆盖了我的EventListener;） – Zazama

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

回答

相关问题