0

My Google Chrome Extension content script receives a message from popup.html using the Google Chrome Message Passing API upon a user logging in using popup.html.

The content script is supposed to dynamically then add a button to the page which when clicked on would trigger an event handler.

The message is received by the content script, the button is added, however when clicked, the button does not fire the handler.

Code below (content script message receiver)

Chrome.runtime.onMessage.addListener(
 function(request, sender, sendResponse) {
     if (request.updatedom == "update") {
          button = '<input title="Buy Now!" id="buynow"  type="submit">'
          $(".button-link").before(button)
     }
});

Content script buynow button click handler: 

$("#buynow").on("click",function(e) {
    console.log("button clicked")
    alert("clicked the button");
})

As the button is added dynamically I used the 'on' JQuery event as the button will be added after page load thinking that this may work.

Christian Papathanasiou
  • 321
  • 1
  • 3
  • 12

1 Answers1

4

You need to append handler to exisiting element in dom or to document

$(document).on("click","#buynow",function(e) {
    console.log("button clicked")
    alert("clicked the button");
})
LTasty
  • 2,008
  • 14
  • 22