コンテンツスクリプトでイベントが発生しないChrome拡張機能

Question

Chrome拡張機能content scriptsをビルドしています。私は動的にボタンをWebページに追加しましたが、このボタンのイベントリスナーはトリガーされません。ここで

はmanifest.json次のとおりです。

{ 
    "manifest_version": 2, 
    "name": "my extension", 
    "browser_action": { 
    "default_icon": "icon.png", 
    "default_popup": "popup.html" 
    }, 
    "permissions": [ 
    "activeTab" 
    ], 
    "content_scripts": [ 
     { 
     "matches": ["http://127.0.0.1:8000/*"], 
     "js": ["jquery.js", "script.js"], 
     "run_at": "document_end" 
     } 
    ] 
} 

これはscript.jsです：ボタンが黄色にページや背景の変化に追加され

document.body.style.backgroundColor = "yellow"; 
var button = $('<input id="btn" type="button"/>'); 
$("body").append(button); 

$("#btn").on("click", function(){ 
    document.body.style.backgroundColor = "red"; 
}); 

が、ボタンをクリックしたときに、それが赤に変更されません。 。

Answer 1

この一意のIDはあなたを助けるかもしれない、疑いの問題は、ボタンのIDである場合）

document.body.style.backgroundColor = "yellow"; 
uniqueId = 'btn' + Date.now(); 
var button = $('<input id="' + uniqueId + '" type="button"/>'); 
$("body").append(button); 

$("#" + uniqueId).on("click", function(){ 
    document.body.style.backgroundColor = "red"; 
}); 

Answer 2

- あなたがいないがまったくIDを必要があることに注意してください。

document.body.style.backgroundColor = "yellow"; 
var button = $('<input id="btn" type="button"/>'); 
$("body").append(button); 

button.on("click", function(){ // Notice you don't need to search for it again! 
    document.body.style.backgroundColor = "red"; 
}); 

ただし、この場合には、あなたは再びそれを見つけることbutton変数を維持する必要があります。