【锋利的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 = $("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>
【锋利的jQuery】中全局事件ajaxStart、ajaxStop不执行的更多相关文章
- 锋利的jQuery中的事件与动画
奋夜的奋斗 ---- 事件与动画 ---- 来自地狱的战镰 小小的单词难不倒我们哦!!!!!!! bind:绑定 unbind:接触绑定 toggle:栓牢 fadeou ...
- 第3章 jquery中的事件和动画
一,jquery中的事件 (1).执行时机 $(document).ready()和window.onload方法有相似的功能,但是在执行时机方面有区别,windwo.onload在网页中所有的元素包 ...
- jQuery中的事件和动画——《锋利的jQuery》（第2版）读书笔记2
第4章 jQuery中的事件和动画 jQuery中的事件 加载DOM $(document).ready(function(){ // 编写代码... }); 可以简写成: $(function( ...
- 锋利的jQuery读书笔记---jQuery中的事件
jQuery中的事件: 1.加载DOM:注意window.onload和$(document).ready()的不同 2.事件绑定 3.合成事件 --2和3的详细信息见代码- <!DOCTYPE ...
- 锋利的jQuery ——jQuery中的事件和动画（四）
一.jQuery中的事件 1)加载DOM $(document).ready()和window.onload的区别 1>执行时机 $(document).ready(){} 方法内注册的事件, ...
- jquery中各个事件执行顺序如下：
jquery中各个事件执行顺序如下: 1.ajaxStart(全局事件) 2.beforeSend 3.ajaxSend(全局事件) 4.success 5.ajaxSuccess(全局事件) 6.e ...
- jQuery中Ajax事件beforesend及各参数含义1
jQuery中Ajax事件beforesend及各参数含义 转自:http://blog.sina.com.cn/s/blog_609f9fdd0100wprz.html Ajax会触发很多事件. 有 ...
- jquery ajax 全局事件
jquery的ajax方法的全部全局事件:(不管是$.ajax().$.get().$.load().$.getJSON()等都会默认触发全局事件) ajaxStart:ajax请求开始前 ajaxS ...
- Javascript事件模型系列（三）jQuery中的事件监听方式及异同点
作为全球最知名的js框架之一,jQuery的火热程度堪称无与伦比,简单易学的API再加丰富的插件,几乎是每个前端程序员的必修课.从读<锋利的jQuery>开始,到现在使用jQuery有一年 ...
随机推荐
- React之key详解
一个例子 有这样的一个场景如下图所示,有一组动态数量的input,可以增加和删除和重新排序,数组元素生成的组件用index作为key的值,例如下图生成的ui展示: 上面例子中的input组件渲染的代码 ...
- 1.6 OWIN集成
OWIN集成 安装 使用 如果在应用程序里既使用ASP.NET MVC也使用ASP.NET Web API,需要在工程里安装Abp.Owin包. 安装 添加Abp.Owin包到主工程里(一般是web工 ...
- 统计数据方面SQL与HQL
因为HQL是面向对象的,所以对于统计数据方面使用HQL时不合适的,其实HQL最终还是会转化成SQL语句,项目里使用HQL语句应该是为了标准规范化. 统计的数据:同一个表,同一个字段,不同属性,统计不同 ...
- 使用 rsync 同步
原文地址 http://www.howtocn.org/rsync:use_rsync 选项 说明 -a, ––archive 归档模式,表示以递归方式传输文件,并保持所有文件属性,等价于 -rlpt ...
- 通过 U 盘启动重装 macOS 系统
重装系统是工作和生活中经常需要做的事情,作为一名开发人员,学会该技能你才是一名合格的程序猿!以后再也不会遇到"程旭元你会装系统吗?"的尴尬了!本文主要介绍怎样通过U盘启动重新安装 ...
- 清北Day4
版权声明:如需转载请标明出处,未得到本人许可请勿转载. 今天就可以看到传说中的 数据结构 嘿嘿嘿嘿 都有什么呢 链表 队列 栈 st表 hash 线段树 树链剖分 一.栈: 放出来这个看烂了的图 值得 ...
- 如何将angular-ui的图片轮播组件封装成一个指令
在项目开发中我们经常会遇到图片轮播的功能点: 如果我们开发人员自己原生手写,将会花费很多的时间,最终得不偿失. 接下来就详细说说如何使用angular-ui发热图片轮播模块,并且将它写成一个指令(便于 ...
- oracle job执行失败
创建job任务:declare test_job number;begin dbms_job.submit(test_job, 'prc_job_test;', sysdate, 'sysdate+1 ...
- POJ1845-Sumdiv大数约数和
题目链接:http://poj.org/problem?id=1845 题目大意: 求A^B的所有约数和s.A和B都很大(0<=A,B<=50000000). 题目分析: 这道题让我学会了 ...
- [刷题]算法竞赛入门经典(第2版) 6-4/UVa439 6-5/UVa1600
比较忙比较累,只贴代码了. 题目:6-4 UVa439 - Knight Moves //UVa439 - Knight Moves //Accepted 0.000s //#define _XIEN ...