動態添加具有不同點擊事件的鏈接

Question

我有一個擴展，它動態添加頁面上的幾個鏈接，所有鏈接應該觸發相同的功能，但具有不同的參數值。

我得到的問題是，點擊事件發送相同的變量爲我所有的鏈接（最後一個項目的URL獲取每個鏈接發送）。我相信每次點擊事件都會被覆蓋。有沒有解決方案？

for(var i=1;i < splits.length;i++){    //goes through all xml items. 
    var link_dom = document.createElement('a'); //creates a link dom. 
    var url = parseXMLItem(splits[i],"url");  //fetches url from xml item i. 
    var text_dom = document.createTextNode("test"); //creates a text dom. 

    link_dom.onclick=function (evt) {    //click event for this specific link. 
     chrome.extension.sendRequest({'action' : 'showSite','URL' : url}, mysub); 
    } 

    link_dom.appendChild(text_dom);    //adds text to link. 
    body_dom.appendChild(link_dom);    //adds the link to the website. 
} 

Answer 1

閉包引用外部上下文中的變量，該變量在每個循環迭代中重新分配。試試這樣的：

for(var i=1;i < splits.length;i++){    //goes through all xml items. 
    var link_dom = document.createElement('a'); //creates a link dom. 
    var url = parseXMLItem(splits[i],"url");  //fetches url from xml item i. 
    var text_dom = document.createTextNode("test"); //creates a text dom. 

    link_dom.onclick=(function(url) { 
     return function (evt) {    //click event for this specific link. 
      chrome.extension.sendRequest({'action' : 'showSite','URL' : url}, mysub); 
     } 
    })(url); 

    link_dom.appendChild(text_dom);    //adds text to link. 
    body_dom.appendChild(link_dom);    //adds the link to the website. 
}