【锋利的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有一年 ...
随机推荐
- PHP 学习笔记(2)
<?php$foo = "0"; // $foo 是字符串 (ASCII 48)$foo += 2; // $foo 现在是一个整数 (2)$foo = $foo + ...
- css3隐藏导航栏总结
display:none隐藏display:block显示 1.通过hover显示时隐藏元素必须与触发元素存在着关系(父子,兄弟)才能生效,所以推荐用JS完成比较好. 2.隐藏部分的属性直接写在hov ...
- fstream 学习
#include <fstream> 引用:http://blog.csdn.net/qiang60125/article/details/5949750(fstream 常用方法详解) ...
- Ionic2 + Angular4 + JSSDK开发中的若干问题汇总
前景 目前微信公众号程序开发已经相当火热,客户要求自己的系统有一个公众号,已经是一个很常见的需要. 使用公众号可以很方便的便于项目干系人查看信息和进行互动,还可以很方便录入一些电脑端不便于录入的数据, ...
- Kafka配置及简单命令使用
一. Kafka中的相关概念的介绍 Kafka是一个scala实现的分布式消息中间件,其中涉及到的相关概念如下: Kafka中传递的内容称为message(消息),message 是通过topic(话 ...
- USACO section 1.1 C++题解
USACO section1.1:DONE 2017.03.03 TEXT Submitting Solutions DONE 2017.03.04 PROB Your Ride Is Here [A ...
- Layout基本属性总结
在Android中,共有五种布局方式,分别是:FrameLayout(框架布局),LinearLayout (线性布局),GridLayout(网格布局),RelativeLayout(相对布局),T ...
- 关于使用命令添加jar进自己的pom文件中-maven项目添加jar包
现在几乎开发项目都是使用的maven项目,但是有的时候可以使用比较偏门或者新的jar可能在网上搜不到在pom文件里的配置应该如何写,因此写下这篇博客. 比如我现在想加入的AAA.jar这个包 打开cm ...
- Linux系统管理10——进程和计划任务管理
Linux系统管理10——进程和计划任务管理 一.程序和进程的关系 1.程序 ·保存在硬盘.光盘等介质中的可执行代码和数据 ·静态保存的代码 2.进程 ·在CPU及内存中运行的程序代码 ·动态执行的代 ...
- DokiCam 360°4K相机：为极致运动爱好者而生
去年11月,位于中国苏州的DokiCam为其360°消费像机推出了Kickstarter人群资助活动.随着本次活动圆满结束,这款被称为DokiCam 360°的动作相机现在已经可以购买. 进入360° ...