Question

我的Google Chrome扩展程序内容脚本会在用户使用popup.html登录时使用Google Chrome消息传递API从popup.html收到消息。

内容脚本应该是动态的，然后向页面添加一个按钮，单击该按钮会触发事件处理程序。

内容脚本收到消息，添加了按钮，但是单击该按钮时，该按钮不会触发处理程序。

下面的代码（内容脚本消息接收者）

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)
     }
});

内容脚本buynow按钮单击处理程序：

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

当动态添加按钮时，我使用了'on'JQuery事件，因为在页面加载后会添加按钮，认为这可能有效。

Answer 1

您需要将处理程序附加到dom中的exisiting元素或文档

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

动态添加按钮不会在Google Chrome内容脚本

1 个答案: