意外事件覆蓋

Question

是我的代碼（簡化）：

function FillTable (oProfile_data) { 

    var oTable = document.getElementById ("table"); 

    for (var key in oProfile_data) { 

     var oRow = oTable.insertRow (oTable.rows.length); 
     var oCell = oRow.insertCell (0); 

     var oLink = document.createElement ("a"); 
      oLink.href = "javascript:void(0)"; 
      oLink.innerHTML = "Visit Homepage"; 

      oLink.addEventListener ("click", 
      function() { 
       var win = window.open (oProfile_data [key]["url"], "_blank"); 
       win.focus(); 
      }, false); 

     oCell.appendChild (oLink); 
    } 
} 

的問題是，每行都有一個鏈接到同一個文件，我想不通爲什麼！

我的臨時解決辦法是：

oLink.href = "javascript:void(0); var win = window.open (\"" + oProfile_data [key]["url"] + "\", \"_blank\"); win.focus();"; 

工作正常。 我認爲這是一個事件壓倒一切的問題，但我可能是錯的。

任何幫助將非常感謝！

Answer 1

這是一個問題，可以通過了解關閉來解決。您的匿名函數（綁定到點擊事件）不會被調用，直到用戶點擊鏈接，當該行被執行：

var win = window.open (oProfile_data [key]["url"], "_blank"); 

的key值將被FillTable功能被封閉。因此，它將保留函數結束時的值（即循環中保存的最後一個值）。

您必須爲循環的每次迭代創建一個新的閉包。喜歡的東西：

oLink.addEventListener ("click", 
(function (k) { 
    return function() { 
     var win = window.open (oProfile_data [k]["url"], "_blank"); 
     win.focus(); 
    } 
} 
)(key), false); 

上面，我們創建一個函數，返回打開你的窗函數。然後，我們將key的值傳遞給該函數，從而創建一個新的閉包。