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

发布于 2024-10-07 21:24:15 字数 805 浏览 2 评论 0原文

我有一个扩展，它可以动态地在页面上添加多个链接，并且所有链接都应该触发相同的函数，但具有不同的参数值。

我遇到的问题是，单击事件为所有链接发送相同的变量（为每个链接发送最后一个项目的 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.
}

原文

I have an extension which adds several links on a page dynamically, and all the links should trigger the same function but with diffrent parameter values.

The problem I got is that the click event sends the same variable for all my links (the last item's url gets sent for every link). I belive the click event gets overwritten each time. Is there any solution for this?

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

丘比特射中我 2024-10-14 21:24:16

闭包引用外部上下文中的变量，该变量在每次循环迭代时都会重新分配。尝试这样的事情：

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

The closure is referencing the variable in the outer context, which is reassigned on every loop iteration. Try something like this:

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

回复收藏 0 原文

~没有更多了~