事件未在内容脚本 Chrome 扩展上触发答案

【问题标题】：Event not triggering on a content scripts Chrome extension事件未在内容脚本 Chrome 扩展上触发
【发布时间】：2016-07-10 10:22:52
【问题描述】：

我正在构建一个 content scripts Chrome 扩展程序。我已经在网页中动态添加了一个按钮，但是该按钮上的事件监听器不会触发。

这里是manifest.json：

{
  "manifest_version": 2,
  "name": "my extension",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "activeTab"
  ],
  "content_scripts": [
      {
        "matches": ["http://127.0.0.1:8000/*"],
        "js": ["jquery.js", "script.js"],
        "run_at": "document_end"
      }
  ]
}

这是script.js：

document.body.style.backgroundColor = "yellow";
var button = $('<input id="btn" type="button"/>');
$("body").append(button);  

$("#btn").on("click", function(){
    document.body.style.backgroundColor = "red"; 
});

按钮添加到页面，背景变为黄色，但点击按钮时不变为红色。

【问题讨论】：

主页上是否存在具有相同id #btn 的按钮？
应该可以。您可以尝试委托：- $("body").on("click", "#btn", function(){
为我工作我使用了相同的代码...肯定是按钮 id 有问题
如果 JavaScript 被阻止，那么background changes to yellow怎么办？
由于某种原因，当开发工具打开时它不起作用，但当我关闭它时它起作用。

标签： javascript jquery html google-chrome google-chrome-extension

【解决方案1】：

如果可疑的问题与按钮 ID 有关 - 请注意您根本不需要该 ID。

document.body.style.backgroundColor = "yellow";
var button = $('<input id="btn" type="button"/>');
$("body").append(button);  

button.on("click", function(){ // Notice you don't need to search for it again!
    document.body.style.backgroundColor = "red"; 
});

但是，在这种情况下，您需要保留 button 变量才能再次找到它。

【讨论】：

【解决方案2】：

这个唯一的 id 可以帮助你；）

document.body.style.backgroundColor = "yellow";
uniqueId = 'btn' + Date.now();
var button = $('<input id="' + uniqueId + '" type="button"/>');
$("body").append(button);

$("#" + uniqueId).on("click", function(){
  document.body.style.backgroundColor = "red";
});

【讨论】：