为什么一段jquery脚本代码在HTML头代码中不起作用？
这是工作代码:
我使用 Firefox Web 开发工具中的“网络”选项卡来测试它。当我运行第一个代码片段时，我可以看到它将详细信息发布为 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>最佳答案
因为 HEAD 部分中的代码在 BODY 中的元素加载且文档准备就绪之前运行。这就是为什么 Jquery 几乎总是包含在
中$( document ).ready(function() {
//your code goes here
});
因此，在所有元素(即文档)完全加载之前，不会执行任何脚本。
在您的情况下，当您将代码移至正文时，它会起作用，因为幸运的是，那时您所需的所有元素都已加载并准备好使用。
关于jquery 脚本不在 html head 中运行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56659955/