【锋利的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有一年 ...
随机推荐
- [CTSC1999]【网络流24题】星际转移
Description 由于人类对自然资源的消耗,人们意识到大约在2300 年之后,地球就不能再居住了.于是在月球上建立了新的绿地,以便在需要时移民.令人意想不到的是,2177 年冬由于未知的原因,地 ...
- 存储容量和IOPS的关系
在云计算时代,数据量成几何形式增加,必然会考虑增加存储容量,但是增加存储容量不简单存储性能得到提升,他们之间没有必然的联系: 存储容量,就是指存储设备上能够存储数据的大小,比如,一个磁盘阵列有50T的 ...
- 取消input默认样式
有时候input在页面中被聚焦后会出现默认的边框样式,可以通过以下方法取消去除 .input:focus{ outline: none;}
- My First GitHub
第一次使用github 在https://github.com/注册账号. 登陆之后,首先创建一个仓库(+ new repository),开源(public)的仓库是免费的,私人(private)的 ...
- 使用HTMLParser爬取标签内容
以此网站为例 import urllib.request from html.parser import HTMLParser from html.entities import name2codep ...
- JS判断PC和移动端设备
1.方法一 function IsPC() { var userAgentInfo = navigator.userAgent; var Agents = ["Android", ...
- linux vi 报错 E37: No write since last change (add ! to override)
用 vi 命令编辑文本文件,没有文件写入权限的时候会报这个错.:q :wq 怎么都不能退出. 这时只需 ctrl+z 即可,或者在退出命令后加 ! 忽略提示 :q!
- 服务器返回webview字符串，用该字符串填满整个屏幕，不可缩放
数据源 String webview_str: <p><img src="http://img.tianxiahuo.cn/goods/20160114/uploads/i ...
- 华为路由器AR1220F-S的端口映射NAT配置（拨号光纤上网）
telnet 登录 或者ssh登录路由器 //进入系统试图界面 sys-view //第一步. 添加acl规则, 允许内网本身访问对外的公网ip. 否则,只能外部人员访问你的公网ip [Huawei] ...
- Java迭代器Iterator
之前我们实现了迭代器模式,很多编程语言实际上已经内置了迭代器类,比如Java就为我们实现了迭代器Iterator.我们首先来看Iterator中的源码. 通过JDK源码我们发现Iterator是一个接 ...