将按钮插入到内容脚本的 DOM 中

Question

我正在编写一个 Firefox 扩展，但遇到以下问题：

我在内容脚本 (insertInDom.js) 中添加了一个按钮

$('#leftCol').append("<input type='button' value='Check Privacy' onclick=\"buttonClick()\" >");

用户单击该按钮后，应该启动内容脚本中的一个函数，但我总是得到 错误 Fehler：buttonClick 未定义

我如何对脚本中插入按钮的事件做出反应？谢谢:)

整个相关代码：

main.js

var pageMod = require("page-mod");
pageMod.PageMod({
    include: ["http://www.facebook.com/"],
    contentScriptWhen: 'ready',
    contentScriptFile: [data.url('jquery-1.6.4.js'),
                       data.url('insertInDom.js')],
    onAttach: function(worker) {
        worker.port.on('buttonClicked', function(content) {
            console.log(content);
        });
    }
});

insertInDom.js：

function buttonClick(){
    self.port.emit("buttonClicked", "true");
}

$('#leftCol').append("<input type='button' value='Check Privacy' onclick=\"buttonClick()\" >");

Answer 1

从 jQuery 1.7 开始，我认为添加单击事件的适当方法（甚至添加到加载初始页面后创建的 DOM 元素）如下所示：

$("#dataTable tbody tr").on("click", function(event){
alert($(this).text());
}); 

docs: http://api.jquery.com/on/

因此，您可以尝试在输入中添加 ID，然后执行以下操作：

   $("#myInput").on("click", function(event){
      self.port.emit("buttonClicked", "true");
    }); 

Answer 2

既然您已经在使用 jQuery，为什么不使用 jQuery 来处理您的点击事件呢？另外，我尝试养成使用 jQuery 构建 DOM 元素的习惯 - 它将确保您不会偶然发现一些不太可能的浏览器问题。

$('<input />', { type: 'button', value: 'Check Privacy' })
    .on('click', buttonClick)
    .appendTo('#leftCol');