动态添加具有不同点击事件的链接

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. 
}