不能添加监听器

Can't add listener?

本文关键字：监听器 添加 不能      更新时间：2023-09-26

我又遇到了另一个问题。问题是我无法在手动添加的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文件，我曾经有url，但我删除了那些有利于javascript文件，允许用户手动添加url。

认为,

你可以将事件监听器添加到你手动添加的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
  }
});
相关文章：