javascript addEventListener不起作用

Question

我正在編寫一個簡單的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>

EDIT2

我嘗試使用.bind(this,i)給出答案的sugestion .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);
  }
});

正如您所看到的，我有一個Before and After console.log()以及addEventListener內部，它似乎沒有調用addEventListener任何內容，如下所示：

鍍鉻控制台

它在addEventListener調用console.log但仍然無法正常工作

鍍鉻控制台3

Answer 1

嘗試在函數closure around添加一個closure around

(function(num) {
    element.addEventListener("click",function(){
       changeTab(window.tabs[num].id);
    },false);
})(i)

單擊該元素后，將在稍后階段執行該事件。 因此，當for循環完成時， i總是指向最后一個迭代值。

因此，將其封閉在匿名函數中會在變量周圍創建一個閉包，該閉包在click事件發生時可用。

Answer 2

您的函數回調發生在無法識別i的上下文中。您可以將i值綁定到函數，並使其工作：

element.addEventListener("click",function(iVal){
      changeTab(window.tabs[iVal].id);
    }.bind(this,i),false);

javascript addEventListener不起作用

問題描述

EDIT2

2 個解決方案

解決方案1
5 2013-05-22 00:31:23

解決方案2
2 已采納 2013-05-22 00:45:46

javascript addEventListener不起作用

問題描述

EDIT2

2 個解決方案

解決方案1 5 2013-05-22 00:31:23

解決方案2 2 已采納 2013-05-22 00:45:46

解決方案1
5 2013-05-22 00:31:23

解決方案2
2 已采納 2013-05-22 00:45:46