Question

为什么一段jquery脚本代码无法在HTML头代码中使用？

这是工作代码：

我使用Firefox的Web Developer工具中的“网络”标签进行测试。当我运行第一个代码段时，可以看到当我更改切换时，它会以http://localhost/creditapp/test1.php?mode=No和http://localhost/creditapp/test1.php?mode=Yes的形式发布详细信息，但是使用第二段代码时，它不会发布到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头时，它不会将数据发布到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
});

直到所有元素（即文档）都完全加载后，脚本才能执行。

在您的情况下，将代码移到主体上可以正常工作，因为幸运的是，到那时为止，您已经准备好要使用的所有元素，并且可以使用它们。

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头中运行

2 个答案: