Question

有人能帮助我吗？我在javascript中编写了简单的代码，但由于某些原因它无法工作。我想弄清楚，但我不明白为什么。我已经下载了jquery，它一切都还可以，我也只尝试了javascript代码，但仍然是同样的问题。浏览器是可以的，它加载jquery和javascript在我之前做的文件，但没有加载到这。这是代码：

<!DOCTYPE html>
    <html>
    <head>
        <title>Proba</title>
        <script src="jquery-3.3.1.js">
            $('#btn').click(function f() {
                console.log(1);
            });
        </script>
    </head>
    <body>
    <button id="btn">Click</button>
    </body>
    </html>

Answer 1

在浏览器能够解析HTML之前，您正在绑定事件处理程序。所以此时#btn元素还不在DOM中。

将代码包装在document.ready中，或将脚本移至body代码的底部。

第一种方法

<head>
  <title>Proba</title>
  <script src="jquery-3.3.1.js"></script>
  <script>
    $(function() {
      $('#btn').click(function f() {
        console.log(1);
      });
    });

  </script>
</head>

<body>
  <button id="btn">Click</button>
</body>

第二种方法

<head>
  <title>Proba</title>
  <script src="jquery-3.3.1.js"></script>
</head>

<body>
  <button id="btn">Click</button>

  <script>
      $('#btn').click(function f() {
        console.log(1);
      });
  </script>
</body>

Answer 2

<head>
  <title>Proba</title>
</head>

<body>
  <button id="btn">Click</button>

  <script src="jquery-3.3.1.js"></script>
  <script>
      $(document).ready(function(){
       $("#btn").click(function(
        console.log(1);
       ))
      })
  </script>
</body>

试试这样：）

Answer 3

你有没有验证过＆＃34; jquery-3.3.1.js＆＃34;真的存在于当前目录中？请尝试通过已知主机加载脚本，例如Google：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

已编辑：已添加工作代码。注意按钮检查必须在文档最终加载时完成。

<!DOCTYPE html>
<html>
<head>
<title>Proba</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
  $(document).ready(function(){ 
   $("#btn").click(function() {
    console.log(2);
   });
  })
 </script>
</head>

<body>
 <button id="btn">Click</button>
</body>
</html>

Javascript和jquery由于某种原因不会工作

3 个答案: