jquery 脚本没有运行在 html 头部

Question

为什么一段 jquery 脚本代码在 HTML 头代码中不起作用？

这是工作代码：

我使用 Firefox 的 Web Developer 工具中的 "Network" 选项卡对其进行测试。当我运行第一个代码片段时，我可以看到它 post 当我更改切换开关时 http://localhost/creditapp/test1.php?mode=No and http://localhost/creditapp/test1.php?mode=Yes 的详细信息，但是对于第二段代码它没有 post 到 URL。

 <html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script type="text/javascript"     src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">window.jQuery || document.write('<script src="classes/commons/jquery/jquery-1.7.1.min.js"><\/script>')</script>
    <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
    <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
    <script src="http://malsup.github.com/jquery.form.js"></script> 

 

  </head>
  <body>
    
      <input type="checkbox" name="YesNo" id="YesNo" checked data-toggle="toggle" data-off="No" data-on="Yes" data-onstyle="success" data-offstyle="danger">
     

  <script>
      $('#YesNo').change(function(){
        var mode= $(this).prop('checked');
        if (mode==true) { 
            settingA = "Yes";
            } else {
            settingA = "No"; 
        }
        $.ajax({
          type:'GET',
          dataType:'JSON',
          url:'test1.php',
          data:'mode='+settingA,
          success:function(data)
          {
            var data=eval(data);
            message=data.message;
            success=data.success;
          }
        });
      });
    </script>
  
  </body>
  </html>

当我将 jquery 脚本代码移至 html 头部时，它不会 post 将数据移至 URL:

 <html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script type="text/javascript"     src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">window.jQuery || document.write('<script src="classes/commons/jquery/jquery-1.7.1.min.js"><\/script>')</script>
    <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
    <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
    <script src="http://malsup.github.com/jquery.form.js"></script> 

  <script>
      $('#YesNo').change(function(){
        var mode= $(this).prop('checked');
        if (mode==true) { 
            settingA = "Yes";
            } else {
            settingA = "No"; 
        }
        $.ajax({
          type:'GET',
          dataType:'JSON',
          url:'test1.php',
          data:'mode='+settingA,
          success:function(data)
          {
            var data=eval(data);
            message=data.message;
            success=data.success;
          }
        });
      });
    </script>

  </head>
  <body>
    
      <input type="checkbox" name="YesNo" id="YesNo" checked data-toggle="toggle" data-off="No" data-on="Yes" data-onstyle="success" data-offstyle="danger">
     

  <script>
      $('#YesNo').change(function(){
        var mode= $(this).prop('checked');
        if (mode==true) { 
            settingA = "Yes";
            } else {
            settingA = "No"; 
        }
        $.ajax({
          type:'GET',
          dataType:'JSON',
          url:'test1.php',
          data:'mode='+settingA,
          success:function(data)
          {
            var data=eval(data);
            message=data.message;
            success=data.success;
          }
        });
      });
    </script>
  
  </body>
  </html>

Answer 1

因为 HEAD 部分中的代码在 BODY 中的元素加载和文档准备就绪之前运行。这就是为什么 Jquery 几乎总是包含在

中的原因

$( document ).ready(function() {
    //your code goes here
});

因此执行脚本的 none 直到所有元素（即文档）都已完全加载。

在您的情况下，当您将代码移动到 body 时它可以工作，因为幸运的是到那时您需要的所有元素都已经加载并准备好使用。

JQuery - Document ready

Answer 2

使用最新的 jQuery 版本可能是个不错的选择：

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

（另外，您可以使用三个额外的 CDN 链接）。

或者您可以添加 jQuery 作为 JS 文件。

链接：

https://www.w3schools.com/jquery/jquery_get_started.asp

https://jquery.com/download/

jquery 脚本没有运行在 html 头部

jquery script doesn't run in html head

jquery

head

jscript

jquery 脚本没有 运行 在 html 头部

jquery script doesn't run in html head

jquery

head

jscript

jquery 脚本没有运行在 html 头部