Question

我正在尝试创建Chrome扩展程序。我对附加到具有内容的站点dom的新元素的事件影响有问题。

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

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

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

为什么我的Chrome扩展程序活动不起作用？

1 个答案: