Question

我正在编写firefox扩展程序并遇到以下问题：

我在内容脚本（insertInDom.js）中添加了一个Button

$('#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开始，我认为添加click事件的适当方式（甚至是在加载初始页面后创建的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');

在DOM内部插入按钮到内容脚本

2 个答案: