Javascript Chrome扩展无法选择DOM元素

我想写一个Chrome扩展，它对点击页面上的特定元素做出反应（这种类型的页面的示例：）

我真正感兴趣的特定元素是

元素，但为了简单起见，我提供了这个演示，它显示我可以让脚本对高级

元素的点击做出反应，但不能对其子元素

做出反应（请参见图中的页面元素列表）

如果有任何关于如何选择DOM中较低层的其他元素的线索，我将不胜感激。如果我将jQuery代码输入Chrome Dev Tools中的javascript控制台而不是使用扩展名，那么用于选择

元素的jQuery代码就可以正常工作

除了manifest.json和content.js之外，扩展文件夹还包括jQuery 3.3.1（名称：“jQuery.js”）的下载副本

（我想还有一种方法可以让页面从googleapis下载jQuery，但我还没有找到方法。一次只下载一件。）

manifest.json

 {
  "manifest_version": 2, 
  "name": "Mentimeter demo",
  "version": "0.1.0",
  "description": "Mentimeter demo",
 "content_scripts": [{
      "js": ["jquery.js","content.js"],
    "matches": ["https://www.mentimeter.com/*"]
  }]
}

{
  "manifest_version": 2,

  "name": "Vanilla JS selection demo",
  "version": "0.1.0",
  "description": "Vanilla JS selection demo",

  "content_scripts": [{
    "js": ["content.js"],
    "matches": ["https://www.mentimeter.com/*"]
  }]

content.js

$(document).ready(function(){
//$("div#root").click(function(){//works
$("div.application").click(function(){//does not work
alert("click");
});
});

document.addEventListener("click",function(event){
var target = event.target;
if(target.tagName.toLowerCase() == "rect"){
alert("rect clicked");
} 
},false);

等等。还有更多。

令人费解的是，一个使用vanilla JS的简单版本能够毫无问题地选择

元素：

manifest.json

 {
  "manifest_version": 2, 
  "name": "Mentimeter demo",
  "version": "0.1.0",
  "description": "Mentimeter demo",
 "content_scripts": [{
      "js": ["jquery.js","content.js"],
    "matches": ["https://www.mentimeter.com/*"]
  }]
}

{
  "manifest_version": 2,

  "name": "Vanilla JS selection demo",
  "version": "0.1.0",
  "description": "Vanilla JS selection demo",

  "content_scripts": [{
    "js": ["content.js"],
    "matches": ["https://www.mentimeter.com/*"]
  }]

content.js

$(document).ready(function(){
//$("div#root").click(function(){//works
$("div.application").click(function(){//does not work
alert("click");
});
});

document.addEventListener("click",function(event){
var target = event.target;
if(target.tagName.toLowerCase() == "rect"){
alert("rect clicked");
} 
},false);

---

如评论中所述：

使用@wOxxOm建议的方法使用jQuery事件委派

$(document).on('click', 'rect', function() { ...... }) 

---

如果您不想使用事件委派，也可以使用这个易于使用的mutationObserver库。

记不清它到底是什么，但我认为Chrome扩展可能不会在定义了

文档的空间中运行。甚至可能不是
窗口
？我建议用谷歌搜索如何在Chrome扩展中编辑文档。（如果您想确定，请运行
console.log（窗口，文档）；
并查看可用内容）是否在解析初始文档（从脚本）后添加了相关DOM节点？然后
$（document）.ready（）
太早了，你必须这么做。@NirajKaushal不正确；它是一个单独的内容脚本JS上下文。典型的解决方案是使用事件委派：$（文档）。（点击），“DIV.Apple”，函数（{…}），如果你不想使用事件委派，你可以考虑使用这个优秀的库。
$(document).on('click', 'rect', function() { ...... })