Javascript锚链接

Question

I have a list of href / text that I need to make anchors for and then display those anchors. Everything is fine until I actually click any of the anchors. They each only open a tab for the last href. Ie if the href of the last element in the list is href_n, then every anchor links to href_n, even if the 'href' attribute is different.

//Current basic setup:

loop through list:

anchor = doc.create('a')
divElem = doc.create('div')
anchor.setAttribute('class', 'foo')
anchor.setAttribute('href', 'bar')
anchor.innerHTML = 'mytext'
anchor.addEventListener('click', function() {chrome.tabs.create({url: 'myurl'})});
divElem.appendChild(anchor)
container.appendChild(anchor)

Previously I tried using .onClick , but I kept having a problem with the event listener trying to just attach to the url. I am very amenable to a cleaner solution though that involves something simpler than an eventlistener.

Thanks much.

Answer 1

You mostly just need to change your click handler to not use variables that are not still valid. Here's sample code:

var urlList = [
    "aaaa",
    "bbbb",
];

var textList = [
    "text1",
    "text2"
];

function createAnchors(urls, text, container) {
    for (var i = 0; i < urls.length; i++) {
        var a = document.createElement("a");
        var div = document.createElement("div");
        a.href = urls[i];
        a.innerHTML = text[i];
        a.className = "foo";
        a.addEventListener("click", function() {
            chrome.tabs.create({url: this.href}); 
            return(false);
        });
        div.appendChild(a);
        container.appendChild(div);
    }
}

The issue is that any variables in your event listener function are not evaluated until the click. So, in this case, you can avoid using them by just getting the url directly from the clicked link.

I hope you also realize that older versions of IE don't support addEventListener . This mozilla page shows you how you can handle that in the Internet Explorer section.

Answer 2

You need to create a closure:

var urls = [];
for(var i=0;i<urls.length;i++){
    anchor.addEventListener('click', 
        (function(url) {
            return function() {
                chrome.tabs.create({url: url})
            }
        })(urls[i])
    );
}