jQuery 在附加加载的 HTML 上运行答案

【问题标题】：jQuery to run on Appended Loaded HTMLjQuery 在附加加载的 HTML 上运行
【发布时间】：2016-07-16 17:19:27
【问题描述】：

我正在创建一个 chrome 扩展程序，以使用内容脚本将自定义 html 菜单附加到页面。内容运行良好，菜单运行良好，但我目前正在从 var 中加载 HTML，如下所示：

var gacMenu = '';
    gacMenu+='<div id="menu">';
    gacMenu+='menu content HTML';
    gacMenu+='menu content HTML';
    gacMenu+='menu content HTML';
    gacMenu+='menu content HTML';
    gacMenu+='</div>';

然后像这样附加到页面：

$("body").append(gacMenu);

由于我仍在创建菜单本身，因此从 var 编辑 HTML 有点烦人，我试图仅使用菜单代码创建一个单独的 HTML，然后使用 LOAD 和 APPEND 这个文件到页面这段代码：

$(function() {
  $('body').append($('body').load('menu.html'));
});

内容已加载，但问题是其他 jquery 函数（如 .click() 和 .change() 仅在从 var 加载时才适用于已加载和附加的内容。

在工作场景中，带有 HTML 和 jquery 函数的 var 都在同一个 JS 文件中。下面是一些在从 var 加载 HTML 时有效的代码，但在从文件加载 HTML 时无效：

$("input:checkbox[name=onoffswitch]").change(function() {
  if ($(this).is(':checked')) {
      chrome.storage.sync.set({'gacMenuSwitch': '1'}, function(toggleOn){ // Define a variável condificonal do menu para 1
        console.log('Switch is ON' + '\n' + 'Menu var is set to 1');
      });
  } else {
      chrome.storage.sync.set({'gacMenuSwitch': '0'}, function(toggleOff){ // Define a variável condificonal do menu para 0
        console.log('Switch is OFF' + '\n' + 'Menu var is set to 0');
      });
    } // fim do if/else
});

如果这是一个蹩脚的问题，我很抱歉，但我正处于编程的早期阶段。我错过了什么？

【问题讨论】：

感谢指点。我已经编辑了我的问题。一切都在同一个名为 menu.js 的 .js 文件中，但是当尝试从 menu.html 附加 HTML 时，menu.js 中的代码似乎不起作用。
我认为这是因为load 是异步的，所以你应该将该代码放入complete 参数的函数中：load('menu.html', function() { /* attach event handlers */ });
其实我错了。似乎 .load() 没有从 HTML 中获取内容。当我尝试 alert() 加载时，它只会显示 [object] [object]，而我猜它应该显示 HTML 内容，对吧？
是的，你应该在web_accessible_resources中列出load.html。
我已经用"web_accessible_resources": ["menu.html"], 定义了清单，但是当我使用 menu.js 中的$.get("menu.html", function(response) {var logfile = response; alert(response);}); 对其进行测试时，警报只显示 [object] [object] :(

标签： jquery google-chrome-extension

【解决方案1】：

在@wOxxOm 的帮助下，我发现有一些事情要做才能使用内容脚本附加 HTML。

我不得不使用 "web_accessible_resources": ["menu.html"] 将清单上的文件“menu.html”列入白名单
我在实际追加之前创建了一个带有警报的 get()，只是为了查看是否正在拉取 HTML。我遇到了一些问题，因为我没有使用 chrome.extension.getURL 来搜索文件，而 get() 返回的是 [object] [object] 而不是 HTML，所以一旦我做了@987654322 @一切都很好
我之前发布的 .append() 和 .load() 遇到了问题，所以我尝试使用 $.get(chrome.extension.getURL('menu.html'), function(data2) {$(data2).appendTo('body');}); 并能够抓取文件。所有不工作的 jquery 都被移到了 get 的回调中，所以现在一切正常

【讨论】：