Question

我再次遇到另一个问题。问题是我无法在我手动添加的URL上添加事件侦听器。有什么我想念的吗？我认为这是向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;
  }
});

我还有一个HTML文件，我以前有这些网址，但我删除了那些支持javascript文件的文件，允许用户手动添加网址。

此致

Answer 1

您可以向手动添加的DOM元素添加事件侦听器，但是您必须在创建DOM元素之后添加事件侦听器，或者必须切换到在父对象上使用委派事件处理或更改在当前循环中添加事件侦听器的时间，直到所有动态链接都已创建。

在这种情况下，我建议您在创建新链接时直接添加事件处理程序。

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
  }
});

无法添加监听器？

1 个答案: