Question

I’m writing a firefox extension and have the following problem:

I added inside a content script (insertInDom.js) a Button

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

After the user clicked the button a function from the content script should be started, but I always get the error Fehler: buttonClick is not defined

how can I react on the event of an inserted Button inside my script? Thank you 🙂

The whole relevant code:

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

As of jQuery 1.7, I think the appropriate way to add a click event (even to a DOM element that has been created after the initial page is loaded is like so:

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

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

So, you could try adding an ID to your input and then something like:

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