Google chrome extension 注入的html代码在chrome扩展中使用Mustache，onclick返回函数不起作用_Google Chrome Extension

Google chrome extension 注入的html代码在chrome扩展中使用Mustache，onclick返回函数不起作用

google-chrome-extension

Google chrome extension 注入的html代码在chrome扩展中使用Mustache，onclick返回函数不起作用,google-chrome-extension,Google Chrome Extension,我需要一些帮助来了解我的Chrome扩展的以下问题。在我的扩展中，我有两个图像。图像#0，在popup.html页面中硬编码，而第二个图像（图像#1）使用Mustache模板从popup.js文件注入popup.html文件，作为图像#1。两个图像的代码完全相同。我通过查看浏览器页面的源代码输出验证了这一点假设发生的情况：在每个图像上单击鼠标时，应该调用一个函数，并显示一条警告消息发生了什么：硬记录图像（图像#0）调用函数并显示警报消息，而注入的代码拒绝调用警报函数我需要帮助理解这一点。

我需要一些帮助来了解我的Chrome扩展的以下问题。在我的扩展中，我有两个图像。图像#0，在popup.html页面中硬编码，而第二个图像（图像#1）使用Mustache模板从popup.js文件注入popup.html文件，作为图像#1。两个图像的代码完全相同。我通过查看浏览器页面的源代码输出验证了这一点

假设发生的情况：在每个图像上单击鼠标时，应该调用一个函数，并显示一条警告消息

发生了什么：硬记录图像（图像#0）调用函数并显示警报消息，而注入的代码拒绝调用警报函数

我需要帮助理解这一点。我缺少一些基本的东西。我将不胜感激

代码如下：

清单文件

{
 "name": "test",
 "description": "..",
 "version": "1",
 "manifest_version": 2,
 "icons": { "128": "images/icon_128.png" },
 "permissions": [ "cookies", "tabs", "background", "storage", "http://*/*",     "https://*/*" ],
 "minimum_chrome_version": "25",

 "content_scripts": [{"all_frames": true,
                   "matches": ["http://*/*", "https://*/*"],
                   "js": ["js/jquery-2.0.3.min.js"]
                 }],


"browser_action": {"default_icon": "images/icon.png",
               "default_popup": "html/popup.html",
               "default_title": "test"
        }
}

popup.html文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>

  <body>


  <div id="image0">    
     <img class="delWebTile" alt="#" src="http://placehold.it/300x200">
  </div>

  <div id="image1">    
  </div>

    <script src="../js/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="../js/mustache-chromeapps.js"></script>
    <script type="text/javascript" src="../js/popup.js"></script>
 </body>
</html>

popup.js文件

$('.delWebTile').click(function() {

   alert("I am in delete function");
  });

document.addEventListener('DOMContentLoaded', function () {

 var webTile = {
 };

 var template = '<img class="delWebTile" alt="#" src="http://placehold.it/300x200">';

var html = Mustache.to_html(template, webTile);
$('#image1').html(html);

$（'.delWebTile'）。单击（函数（）{
警报（“我处于删除功能”）；
});
document.addEventListener（'DOMContentLoaded'，函数（）{
var webTile={
};
var模板=“”；
var html=Mustache.to_html（模板，webTile）；
$（'#image1'）.html（html）；

谢谢..

现在发生的事情是，您正在插入标记之前添加单击事件绑定，因此不会触发单击事件。您应该使用类似于始终侦听事件的方式

$( "body" ).on( "click", ".delWebTile", function() {
    ...
});