最近一直都在研究【锋利的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 = $("form").serializeArray(); var data = $("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>