Javascript chrome扩展弹出窗口无法按ID找到元素

Javascript chrome扩展弹出窗口无法按ID找到元素,javascript,jquery,html,google-chrome-extension,popup,Javascript,Jquery,Html,Google Chrome Extension,Popup,我知道类似的问题已经被问过很多次了,但我还没有找到解决办法。我的问题很简单。我想做的就是在popup.html上测试操作,因为在这里,我在popup上有一个单击按钮,当我单击它时,我想显示警报。但什么也没发生。它没有找到元素。我不明白这里出了什么问题 manefest.json { "name": "test", "version": "1.0", "description": "test", "manifest_version":2, "browser_action": {

我知道类似的问题已经被问过很多次了,但我还没有找到解决办法。我的问题很简单。我想做的就是在popup.html上测试操作,因为在这里,我在popup上有一个单击按钮,当我单击它时,我想显示警报。但什么也没发生。它没有找到元素。我不明白这里出了什么问题

manefest.json

{
  "name": "test",
  "version": "1.0",
  "description": "test",
  "manifest_version":2,
  "browser_action": {
    "default_icon": "logo.png",
    "default_popup":"popup.html"
  },
  "permissions": [
    "tabs", 
    "http://*/*",
    "notifications"
  ]
}
popup.html

<html>
  <head>
    <title>Test</title>
    <script type="text/javascript" src="jquery.js"></script> 
    <script type="text/javascript" src="popup.js"></script>
  </head>
  <body>
    <button id='btn'>click</button>
  </body>
</html>

我相信你的popup.js语法是错误的

  $('#btn').click(function (){
   alert("test"); 
};
应该是

    $('#btn').click(function (){
   alert("test");
   });

看起来你少了一个巴拉那人

我相信你的popup.js语法是错误的

  $('#btn').click(function (){
   alert("test"); 
};
应该是

    $('#btn').click(function (){
   alert("test");
   });

看起来你少了一个巴拉那人

问题在于,只要读取了
标记,即在DOM中存在元素之前,代码就会执行

将其包装在
$(document).ready()
中即可:

$(document).ready(function() {
  /* your code */
});
对于非jQuery解决方案,将其包装在
DOMContentLoaded
listener中:

document.addEventListener("DOMContentLoaded", function() {
  /* your code */
});

最后,您可以简单地将
标记移动到
的末尾,但这是一个不太可靠的解决方案。

问题是,只要读取
标记,即在DOM中存在元素之前,代码就会执行

将其包装在
$(document).ready()
中即可:

$(document).ready(function() {
  /* your code */
});
对于非jQuery解决方案,将其包装在
DOMContentLoaded
listener中:

document.addEventListener("DOMContentLoaded", function() {
  /* your code */
});

最后,您可以简单地将
标记移动到
的末尾,但这是一个不太健壮的解决方案。

您可以制作一个JSFIDLE吗?您可以制作一个JSFIDLE吗?