Jquery Can'；t通过chrome扩展中的内容脚本使onclick在注入的按钮上工作

我正在开发一个chrome扩展，在网页上插入一个按钮。我能够成功地插入按钮，但是我无法对其应用

onclick

功能。我在

content.js

中编写了按钮注入代码，如下所示

jQuery('body').append('<button onclick="myFxn();" class="vwsItBtn" style="height: 25px; width: 80px; position: absolute; opacity: 1; font-size: 12px; z-index: 867530999; display: block; padding-right: 4px !important; margin: 0px; border: 2px solid rgb(254, 208, 70); background-color: whitesmoke; border-radius: 4px; font-weight: bolder; text-shadow: #FED046 0px 0px 1px; color: #36373B; text-align-last: end;"><img id="myImgVw" style="width: 15px; display: inline-block; padding: 0px; left: 2px; position: absolute; vertical-align: middle !important; top: 3px;" src="'+chrome.extension.getURL("imgvwextsitbtn.png")+'"/> Schedule</button>');

jQuery(function(){
    function myFxn(){
        alert('This is working!');
    }
})

jQuery（'body'）。追加（'Schedule'）；
jQuery（函数（）{
函数myFxn（）{
警报（“这正在工作！”）；
}
})

现在我得到一个错误，myFxn没有定义。现在这个函数很简单，但是我如何使它工作呢？

---

这是我第一次开发chrome扩展，我很确定还有其他方法可以实现。请帮忙

问题是因为

myFxn（）

函数是在jQuery document.ready处理程序的作用域内声明的，而它需要是全局的，以便*属性上的

能够访问它。试试这个：

jQuery('body').append('<button onclick="myFxn();" class="vwsItBtn" style="height: 25px; width: 80px; position: absolute; opacity: 1; font-size: 12px; z-index: 867530999; display: block; padding-right: 4px !important; margin: 0px; border: 2px solid rgb(254, 208, 70); background-color: whitesmoke; border-radius: 4px; font-weight: bolder; text-shadow: #FED046 0px 0px 1px; color: #36373B; text-align-last: end;"><img id="myImgVw" style="width: 15px; display: inline-block; padding: 0px; left: 2px; position: absolute; vertical-align: middle !important; top: 3px;" src="'+chrome.extension.getURL("imgvwextsitbtn.png")+'"/> Schedule</button>');

function myFxn(){
    alert('This is working!');
}

jQuery（函数（$）{
$（'body'）。追加（'Schedule'）；
$（'.vwsItBtn'）。单击（函数（）{
警报（“这正在工作！”）；
});
});
我之前已经试过了，但这是错误：（索引）：1未捕获的引用错误：myFxn未定义此操作已成功，犯了一个愚蠢的错误。谢谢。你的回答告诉了我正确的方法！没问题，很乐意帮忙。重要的是要理解为什么第一个解决方案仍然不起作用。内容脚本；使用onclick属性创建元素将在页面上下文中创建处理程序，而处理程序是在内容脚本上下文中创建的。第二种解决方案通过将所有内容保留在内容脚本上下文中来避免此问题。@Xan感谢您提供的信息。如果你查看我对这个答案的第二条评论，我在想一些类似的事情，后来在理解这个答案后意识到了你提到的内容
.vwsItBtn {
    height: 25px; 
    width: 80px; 
    position: absolute; 
    opacity: 1; 
    font-size: 12px; 
    z-index: 867530999; 
    display: block; 
    padding-right: 4px !important; 
    margin: 0px; 
    border: 2px solid rgb(254, 208, 70); 
    background-color: whitesmoke; 
    border-radius: 4px; 
    font-weight: bolder; 
    text-shadow: #FED046 0px 0px 1px; 
    color: #36373B; 
    text-align-last: end;
}
#myImgVw {
    width: 15px; 
    display: inline-block; 
    padding: 0px; left: 2px; 
    position: absolute; 
    vertical-align: middle !important; 
    top: 3px;
}