为什么我的 Chrome 扩展事件不起作用？答案

【问题标题】：Why my Chrome extension event doesn't work?为什么我的 Chrome 扩展事件不起作用？
【发布时间】：2019-04-19 13:05:48
【问题描述】：

我正在尝试创建一个 chrome 扩展程序。我对添加到带有内容的站点 dom 的新元素的事件影响存在问题。 js

如果我向页面中已经存在的元素“例如类”添加事件，则它可以正常工作。只是为了我的新附加元素（（在代码中我添加了一个按钮，该事件只是一个要测试的警报））

function tst() {
  myclass = $("._3hg-._42ft");
  myclass = myclass.not(".supp");
  myclass.addClass("supp");
  var patt = /https:\/\/(.)*\.facebook\.com\/(.)*\/(posts|photos|videos)\/(\w|\.|\d)*/g;
  for (i = 0; i < myclass.length; i++) {
    result = patt.exec(myclass[i]);
    myclass.append('<button class="fact" id=' + result[0] + ' style="position: absolute;">fact</button>');
  };

  /* this is a simple event*/
  /***********************/
  $(".fact").on('click', function() {
    alert("no event work ");
  });

【问题讨论】：

请用您的代码编辑您的问题，我们无法帮助解决此处看不到的问题。 stackoverflow.com/help/mcve
不，这对我的问题不起作用
result[0]是包含各种特殊符号的整个URL，所以需要加上引号，例如id="' + result[0] + '" style=
在函数中创建/使用全局变量是否有原因？
添加代码后，我已投票决定重新开放。请修改代码以修复语法问题（示例函数未关闭/完整，我们应该在其中假设吗？这是 chrome 扩展还是只是页面上的代码？

标签： javascript jquery events google-chrome-extension

【解决方案1】：

在我的回答中做出一些广泛的假设，即它与 JavaScript/jQuery 相关并且不是扩展......或者仍然在那个上下文中。您可能需要在此处将事件附加到容器，以获取动态创建的元素。很多全球性的东西，建议不要这样做，在那里更新。

可能会附加很多按钮？可能只需要点击一次 DOM，但在这个孤立的函数中保持原样。

function tst() {
  let myclass = $("._3hg-._42ft")
    .not(".supp");
  myclass.addClass("supp");
  //let result = {};
  var patt = /https:\/\/(.)*\.facebook\.com\/(.)*\/(posts|photos|videos)\/(\w|\.|\d)*/g;
  var i = 0; //avoid global
  for (i; i < myclass.length; i++) {
    // broad assumption of the returned value from patt.exec() here
    // not even sure why it needs an id, have a class, use for css
    let result = patt.exec(myclass[i]);
    myclass.append('<button class="fact" id="' + result[0] + '">fact</button>');
  }

  /* attache event to pre-existing element */
  /***********************/
  myclass.on('click', ".fact", function() {
    alert("event works");
  });
}

button.fact {
  position: absolute;
}

【讨论】：