js的onclick和jquery的bind事件执行先后顺序
近期在项目中为每一个ajax触发按钮写正在加载的效果,用的是bootstarp
代码如下
$(function(){
$('.btn').bind('click',function(e){
var $btn = $(e.target)
if ($btn.attr("data-loading-text")){
$("#data-loading-control").ajaxStart(function(evt, request, settings){
$btn.button('loading');
});
$("#data-loading-control").ajaxComplete(function(evt, request, settings){
$(".btn").button('reset');
});
}
/*setTimeout(function(){
$btn.button('reset');
},1500);*/
});
});
在每一个按钮的点击事件中,判断该按钮是否存在
data-loading-control属性
例如
<button class="btn btn-primary" id="login-button" type="button" data-loading-text="正在登录">登录</button>
如果有的话就开始监听ajax的start事件和complete事件,并显示正在登陆,完成后重置按钮的状态
但是后来发现只有登录按钮可以正常,其他的按钮都不能显示正在执行的效果
唯一的区别就是,登录按钮的时间是写在jquery的bind中,而其他的按钮为了方便都是直接写了onclick 事件,网上说onclick事件先于bind事件执行,这样就能解释通了。
jquery在onclick事件中已经执行了ajax,然后才增加ajax的绑定监听,所以监听是无效的。
js的onclick和jquery的bind事件执行先后顺序的更多相关文章
- jquery中各个事件执行顺序如下:
jquery中各个事件执行顺序如下: 1.ajaxStart(全局事件) 2.beforeSend 3.ajaxSend(全局事件) 4.success 5.ajaxSuccess(全局事件) 6.e ...
- JQuery 的Bind()事件
刚开始我们先看一下它的定义: .bind( eventType [, eventData], handler(eventObject)) .Bind()方法的主要功能是在向它绑定的对象上面提供一些事件 ...
- addEventListener、onclick和jquery的bind()、click()
addEventListener("click",function(event){},false); removeEventListener("click",f ...
- IE6/IE7/IE8 JQuery下resize事件执行多次的解决方法
在使用jQuery的resize事件时发现每次改变浏览器的窗口大小时resize时间会执行两次,百度搜索了一下找到一个解决的方法,使用setTimeout来解决这个问题代码如下: var resize ...
- jquery中bind事件时的命名空间用法(转)
场景:页面上的某个元素bind多个click事件处理函数,视用户的具体交互情况来决定到底使用哪个处理函数. 问题: unbind时会解绑所有的click事件,造成误伤.如果之前bind时有定义处理函数 ...
- jquery 自定义click事件执行多次
用jquery绑定一个按钮click事件后,第一次点击后一切正常,第二次点击竟然执行两次,以后越来越多, 后来查看文档发现 jquery click 不是替换原有的function 而是接着添加,所以 ...
- jquery ajax 事件执行顺序
jquery中各个事件执行顺序如下: 1.ajaxStart(全局事件) 2.beforeSend 3.ajaxSend(全局事件) 4.success 5.ajaxSuccess(全局事件) 6.e ...
- jquery ajax中事件的执行顺序
jquery中各个事件执行顺序如下: 1.ajaxStart(全局事件) 2.beforeSend 3.ajaxSend(全局事件) 4.success 5.ajaxSuccess(全局事件) 6.e ...
- jquery ajax事件执行顺序
jquery中各个事件执行顺序如下: 1.ajaxStart(全局事件) 2.beforeSend 3.ajaxSend(全局事件) 4.success 5.ajaxSuccess(全局事件) 6.e ...
随机推荐
- PHP和MySQL Web开发 原书第4版 高清文字版,有目录,附带源码
PHP和MySQL Web开发 原书第4版:http://yunpan.cn/QCWIS25zmYTAn 提取码 fd9b PHP和MySQL Web开发 原书第4版源码:http://yunp ...
- vs2012 + web api + OData + EF + MYsql
vs2012 + web api + OData + EF + MYsql 开发及部署 先说下我的情况,b/s开发这块已经很久没有搞了,什么web api .MVC.OData都只是听过,没有实际开发 ...
- ASP.NET MVC 文件上传和路径处理
ASP.NET MVC 文件上传和路径处理总结 目录 文件的上传和路径处理必须解决下面列出的实际问题: 1.重复文件处理 2.单独文件上传 3.编辑器中文件上传 4.处理文章中的图片路径 5.处理上传 ...
- linux虚拟文件系统2
转自:http://rstevens.iteye.com/blog/849413 一.概述 Linux 文件系统是相当复杂的,本文只分析虚拟文件系统的实现,对具体的文件系统不涉及. 即使是虚拟文件系统 ...
- curl 简单使用
cURL -- Command Line URL viewer -u username:password 以 Basic 方式发送用户名和密码 -d 以 POST 方式发送数据 -X 支持其它动词, ...
- jQuery基础---Ajax进阶
原文:jQuery基础---Ajax进阶 内容提纲: 1.加载请求 2.错误处理 3.请求全局事件 4.JSON 和 JSONP 5.jqXHR 对象 发文不易,转载请注明出处! 在 Ajax 基础一 ...
- Linux httpd 跳转简单方法二
使用mod_proxy 这种方法要添加上mod_proxy_http.so 在httpd.conf 中打开httpd-vhost 在 httpd-vhost 里面添加上 <VirtualHost ...
- PHP 9: 表达式
原文:PHP 9: 表达式 本章介绍PHP的表达式.PHP的表达式其实和其他语言没有什么区别.普通的赋值是表达式,函数也是表达式,通过函数赋值也是.三元条件运算符也是,即: $first ? $sec ...
- 快速构建Windows 8风格应用24-App Bar构建
原文:快速构建Windows 8风格应用24-App Bar构建 本篇博文主要介绍构建AppBar基本步骤.如何构建AppBar.如何在AppBar中构建上下文命令.如何在AppBar中构建菜单.如何 ...
- Visual Studio Contact
Visual Studio Contact(); 直播笔记 昨天微软干了几件了不起的事:.NET开发环境将开源.跨平台支持(Mac OS X和Linux).多设备支持(WP.Android和iOS ...