无法添加监听器？

Question

Here I am again with another problem. The problem is that I can't add event listeners on the URLs I'm adding manually. Is there something I am missing? I thought this was the proper way of adding elements to DOM.

popup.js

window.addEventListener('DOMContentLoaded', function() {
  var urls= document.querySelectorAll('a.url');
  for(i=0,len=urls.length;i<len; i++) {
    urls[i].addEventListener('click', function() {
      chrome.tabs.create({url: this.href});
    }, false);
  }
}, false);

chrome.storage.local.get(['bookmarks'], function(data) {
  var jsonString = JSON.stringify(data);
  var resultObject = JSON.parse(jsonString);
  //var body = document.body;
  for(var i in resultObject.bookmarks) {
    var bookmark = resultObject.bookmarks[i];
    var div = document.createElement('div');
    var a = document.createElement('a');
    var body = document.body;
    body.appendChild(div);
    div.appendChild(a);
    a.setAttribute('class', 'url');
    a.setAttribute('href', bookmark.url);
    a.innerHTML = bookmark.title;
  }
});

I also have an HTML file I used to have the URLs in, but I removed those in favour of the javascript file allowing users to add URLs manually.

Regards,

Answer 1

You can add event listeners to DOM elements you add manually, but you either have to add the event listeners AFTER you've created the DOM elements or you have to switch to using delegated event handling on a parent object or change the timing of when you add the event listeners in your current loop until all your dynamic links are already created.

In this case, I'd suggest that you just add the event handler right when you create the new links.

function linkClick() {
    chrome.tabs.create({url: this.href});
}

window.addEventListener('DOMContentLoaded', function() {
  var urls= document.querySelectorAll('a.url');
  for(i=0,len=urls.length;i<len; i++) {
    urls[i].addEventListener('click', linkClick, false);   // <== change this
  }
}, false);

chrome.storage.local.get(['bookmarks'], function(data) {
  var jsonString = JSON.stringify(data);
  var resultObject = JSON.parse(jsonString);
  //var body = document.body;
  for(var i in resultObject.bookmarks) {
    var bookmark = resultObject.bookmarks[i];
    var div = document.createElement('div');
    var a = document.createElement('a');
    var body = document.body;
    body.appendChild(div);
    div.appendChild(a);
    a.setAttribute('class', 'url');
    a.setAttribute('href', bookmark.url);
    a.innerHTML = bookmark.title;
    a.addEventListener('click', linkClick, false);   // <== add this
  }
});