首页 > 代码库 > 【锋利的jQuery】中全局事件ajaxStart、ajaxStop不执行
【锋利的jQuery】中全局事件ajaxStart、ajaxStop不执行
最近一直都在研究【锋利的jQuery】，确实是一本好书，受益匪浅。但由于技术发展及版本更新等原因，里面还是有些坑需要踩的。
比如：第六章七节中提到的全局事件ajaxStart、ajaxStop照着案例敲结果并不会执行。
在查阅资料后，发现原来在jquery1.9+版本以后，ajax全局事件需绑定到document对象上才能触发。
下面是各版本不同写法：
<html><head> <meta charset="utf-8"> <style> #loading { position: absolute; top:0; left:0; right: 0; bottom: 0; background: rgba(0,0,0,.2); display: none; } #loading span { position: absolute; top: 48%; left: 48%; } </style></head><body> <div id="loading"><span>loading...</span></div> <form id="demo"> <input type="text" value="demo1" name="demo1"> <input type="text" value="demo2" name="demo2"> <input type="text" value="demo3" name="demo3"> <input type="submit" value="提交" id="submit"> </form></body></html>
<script> $(function(){ $("#submit").click(function(){ // var data = http://www.mamicode.com/$("form").serializeArray(); var data = http://www.mamicode.com/$("form").serialize(); $.ajax({ type:"get", url:"1.php", data:data, dataType:"json", success:function(data){ console.log(data); }, error:function(xhr,error){ console.log(error); } }) }) // 1.9 以前写法 $("#loading").ajaxStart(function(){ $(this).show(); }).ajaxStop(function(){ $(this).hide(); }) // 1.9+ 之后写法 $(document).ajaxStart(function(){ $("#loading").show(); }).ajaxStop(function(){ $("#loading").hide(); })
// 以上两种简写
// 1.9 以前
$("#loading").on("ajaxStart ajaxStop",function(){
$(this).toggle();
})
// 1.9+ 以后
$(document).on("ajaxStart ajaxStop",function(){ $("#loading").toggle(); }) })</script>
【锋利的jQuery】中全局事件ajaxStart、ajaxStop不执行
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。