近期在项目中为每一个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事件执行先后顺序的更多相关文章

  1. jquery中各个事件执行顺序如下:

    jquery中各个事件执行顺序如下: 1.ajaxStart(全局事件) 2.beforeSend 3.ajaxSend(全局事件) 4.success 5.ajaxSuccess(全局事件) 6.e ...

  2. JQuery 的Bind()事件

    刚开始我们先看一下它的定义: .bind( eventType [, eventData], handler(eventObject)) .Bind()方法的主要功能是在向它绑定的对象上面提供一些事件 ...

  3. addEventListener、onclick和jquery的bind()、click()

    addEventListener("click",function(event){},false); removeEventListener("click",f ...

  4. IE6/IE7/IE8 JQuery下resize事件执行多次的解决方法

    在使用jQuery的resize事件时发现每次改变浏览器的窗口大小时resize时间会执行两次,百度搜索了一下找到一个解决的方法,使用setTimeout来解决这个问题代码如下: var resize ...

  5. jquery中bind事件时的命名空间用法(转)

    场景:页面上的某个元素bind多个click事件处理函数,视用户的具体交互情况来决定到底使用哪个处理函数. 问题: unbind时会解绑所有的click事件,造成误伤.如果之前bind时有定义处理函数 ...

  6. jquery 自定义click事件执行多次

    用jquery绑定一个按钮click事件后,第一次点击后一切正常,第二次点击竟然执行两次,以后越来越多, 后来查看文档发现 jquery click 不是替换原有的function 而是接着添加,所以 ...

  7. jquery ajax 事件执行顺序

    jquery中各个事件执行顺序如下: 1.ajaxStart(全局事件) 2.beforeSend 3.ajaxSend(全局事件) 4.success 5.ajaxSuccess(全局事件) 6.e ...

  8. jquery ajax中事件的执行顺序

    jquery中各个事件执行顺序如下: 1.ajaxStart(全局事件) 2.beforeSend 3.ajaxSend(全局事件) 4.success 5.ajaxSuccess(全局事件) 6.e ...

  9. jquery ajax事件执行顺序

    jquery中各个事件执行顺序如下: 1.ajaxStart(全局事件) 2.beforeSend 3.ajaxSend(全局事件) 4.success 5.ajaxSuccess(全局事件) 6.e ...

随机推荐

  1. Redis源代码分析(二十七)--- rio制I/O包裹

    I/O每个操作系统,它的一个组成部分.和I/O业务质量,在一定程度上也影响了系统的效率. 今天,我在了解了Redis中间I/O的,相同的,Redis在他自己的系统中.也封装了一个I/O层.简称RIO. ...

  2. UVA - 817 According to Bartjens

    Description  According to Bartjens  The wide dissemination of calculators and computers has itsdisad ...

  3. 把VBScript的函数迁移到C#.NET

    原文:把VBScript的函数迁移到C#.NET VBScript 5.6 Functions C# code Abs System.Math.Abs Array New Object() { } A ...

  4. Java之String类的使用细节

    String类的特点:     字符串对象一旦被初始化就不会被改变,字符串存储在字符串常量池中(字符串缓冲区).如果池中没有就创建,如果有就直接拿过来用.  代码验证如下:     String s ...

  5. 本学习笔记TCP/IP传输协议

    一个.通过网络发送数据,大致能够分为面向有连接与面向无连接两种类型: 1.面向无连接型包含以太网. IP.UDP等协议. 2. 面向有连接 型包含ATM.帧中继.TCP等 协议. 通过一张图了解一下: ...

  6. 个人学习JQ插件编写成果:little酷炫的图片滑动切换效果

    工作一个多月了,好久没来冒冒泡了,看了@wayong的JQ插件教程,自己编写了一个模仿拉勾网首页广告栏滑动特效的JQ插件,现在跟朋友们分享分享! 先上demo链接:http://runjs.cn/de ...

  7. SQL点滴6—“微软不认识闰年2月29日”&字符"N"的作用

    原文:SQL点滴6-"微软不认识闰年2月29日"&字符"N"的作用 http://www.cnbeta.com/articles/50580.htm这个 ...

  8. PHP专业开发IDE——Zend Studio 10.5预览版发布

    Zend Studio是新一代的PHP IDE,高效的开发和维护PHP代码是它的核心.Zend公司目前已发布了Zend Studio 10.5预览版,预览版中提高了快速响应能力和时时误差检查.因此使用 ...

  9. 安装SQL Server 2005 - 初学者系列 - 学习者系列文章

    初学者阶段,建议从数据库为基础入手进行学习. 下面介绍微软的SQL Server 2005数据库的安装. 首先,从下列地址获取SQL Server 2005的安装程序. ed2k://|file|cs ...

  10. uva 11991 - Easy Problem from Rujia Liu?(STL)

    option=com_onlinejudge&Itemid=8&page=show_problem&problem=3142" target="_blank ...