4

開いているすべてのタブを一覧表示する単純なクロム拡張機能を作成しています。このコードがあります

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()ご覧のとおり、 の内部だけでなく、Before と Afterもあり、ここでわかるaddEventListenerように、内部では何も呼び出されていないようです。addEventListener

クロームコンソール

console.log内部を呼び出していますaddEventListenerが、まだ機能していません

クローム コンソール 3

4

2 に答える 2

5

closure around関数を追加してみてください

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

要素をクリックすると、イベントは後の段階で実行されます。したがって、for ループが完了すると、i常に最後に反復された値を指します。

したがって、無名関数で囲むと、変数の周りにクロージャーが作成され、クリック イベントが発生したときに使用できるようになります。

于 2013-05-22T00:31:23.510 に答える