Javascript jqueryajax预加载程序仅在php上单击几个Ajax请求

我面临以下问题。我有一个index.php，它包含一个表单。有几个AJAX请求指向动态加载更多表单元素的不同PHP，例如，当selectbox的选项更改时

表单本身包含一个单击按钮，该按钮指向在被单击时执行AJAX请求的php。在等待php响应Ajax请求时，将显示预加载程序图标

一切正常，除了：

当我更改选择框时，预加载程序图标出现，这是错误的。但是当我点击表单的按钮时，预加载程序图标不会出现，但会出现

这是我在索引php开头的代码。由于我不是Jquery专家，有没有人能告诉我我做错了什么

非常感谢你的帮助

<script>
$(document).ready(function(){
$('#submit').click(function(){
$.post("calculate.php", $("#calculate").serialize(),  function(response) {   
$('#success').html(response);
});
return false;
});
});
</script>


<script>
$(document).ready(function(){
$('#showcontentonchange').change(function(){
$.post("showcontentonchange.php", $("#showcontentonchange").serialize(),  function(response) {   
$('#successshowcontentonchange').html(response);
});
return false;
});
});
</script>


<script>
jQuery.ajaxSetup({
beforeSend: function() {
$('#preloader').html('&nbsp;<img src="preloader.gif" style="position:relative;left:50%;margin-left:-64px;margin-top:5px;z-index:1;">')
},
complete: function(){
$('#preloader').html('')
},
success: function() {
$('#preloader').html('')    
}
});
</script>

$（文档）.ready（函数（）{
$（“#提交”）。单击（函数（）{
$.post（“calculate.php”，$（“#calculate”）.serialize（），函数（响应）{
$（'#success'）.html（回复）；
});
返回false；
});
});
$（文档）.ready（函数（）{
$（'#showcontentonchange'）.change（函数（）{
$.post（“showcontentonchange.php”，$（“#showcontonchange”）.serialize（），函数（响应）{
$（'successshowcontentonchange'）.html（响应）；
});
返回false；
});
});
jQuery.ajaxSetup({
beforeSend:function（）{
$（'#preload'）.html（''）
},
完成：函数（）{
$（'#preload'）.html（''）
},
成功：函数（）{
$（'#preload'）.html（''）
}
});

您可以粘贴和html吗？请将代码的格式设置为适当的缩进。