我正在编写一个简单的 chrome 扩展程序,列出所有打开的选项卡,我上面有这段代码
function changeTab(tabID){
chrome.tabs.update(tabID,{active:false})
}
chrome.windows.getCurrent({populate: true},function (window){
list = document.getElementById('open-tabs');
for (var i = 0; i < window.tabs.length; i++)
{
var li = document.createElement('li');
var element = document.createElement('a');
element.setAttribute('href','#');
element.innerHTML = window.tabs[i].title;
element.addEventListener("click",function(){
changeTab(window.tabs[i].id);
},false);
li.appendChild(element);
list.appendChild(li);
}
});
它列出了打开的选项卡,但似乎没有添加 onClick 事件,当我检查 chrome 控制台时,我得到了这个
为什么没有正确添加事件?
--edit-- 如果有帮助,添加 html
<!doctype html>
<html>
<head>
<title>Count Me</title>
<link rel="stylesheet" href="popup.css" type="text/css">
<script src="popup.js"></script>
</head>
<body>
<div id="main">
<ul id="open-tabs"></ul>
</div>
</body>
</html>
编辑2
我尝试使用答案中给出的建议,.bind(this,i)
但仍然无法正常工作,我添加console.log()
以查看发生了什么,并且似乎它没有进入addEventListener
带有日志调用的代码:
function changeTab(tabID){
chrome.tabs.update(tabID,{active:false})
}
chrome.windows.getCurrent({populate: true},function (window){
list = document.getElementById('open-tabs');
for (var i = 0; i < window.tabs.length; i++)
{
var li = document.createElement('li');
var element = document.createElement('a');
element.setAttribute('href','#');
element.innerHTML = window.tabs[i].title;
console.log('before');
console.log(window.tabs[i].id);
element.addEventListener("click",function(iVal){
console.log('inside');
changeTab(window.tabs[iVal].id);
}.bind(this,i),false);
console.log('after');
console.log(window.tabs[i].id);
li.appendChild(element);
list.appendChild(li);
}
});
正如你所看到的,我有一个之前和之后console.log()
以及里面addEventListener
,它似乎没有调用里面的任何东西addEventListener
,你可以在这里看到:
它正在调用console.log
内部addEventListener
但仍然无法正常工作