近期在项目中为每一个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. DevExpress中获取RichTextEdit中RichEditControl的两种方式

    方式一: var rte = sender as RichTextEdit; control = rte.Controls[] as RichEditControl; 方式二: PropertyInf ...

  2. hadoop编程小技巧(5)---自己定义输入文件格式类InputFormat

    Hadoop代码測试环境:Hadoop2.4 应用:在对数据须要进行一定条件的过滤和简单处理的时候能够使用自己定义输入文件格式类. Hadoop内置的输入文件格式类有: 1)FileInputForm ...

  3. c++中&amp;和&amp;&amp;有什么差别

    他们不同点在于&&相当一个开关语句,就是说假设&&前面值为false那么他就不继续运行后面的表达式:而&无论前面的值为什么,总是运行其后面的语句. &能 ...

  4. CSS3+HTML5特效3 - 纵向无缝滚动

    老惯例,先看例子. This is a test 1. This is a test 2. This is a test 3. This is a test 4. This is a test 5. ...

  5. .net EF 事物 订单流水号的生成 (一)

    首先需要 添加 System.Transactions 程序集 数据表: create table SalesOrder ( ID ,) primary key not null, OrderNo ) ...

  6. 【甘道夫】Ubuntu群集配置 - 免费登陆

    引言 这是几年前写的文章,但一直以来该问题被反复问到.所以我决定将它又一次搬上屏幕. 正文 三个节点:masternode    slavenode1   slavenode2 第一步:全部节点分别生 ...

  7. TCP通信中的大文件传送

    TCP通信中的大文件传送 源码   (为节省空间,不包含通信框架源码,通信框架源码请另行下载) 文件传送在TCP通信中是经常用到的,本文针对文件传送进行探讨 经过测试,可以发送比较大的文件,比如1个G ...

  8. MEF框架在Silverlight中应用(15)

    原文:MEF框架在Silverlight中应用(15) MEF框架在Silverlight中应用 代码下载 MEF框架是微软提供的一个插件框架.应用概括为一句话:输入,输出,组合.下面是具体在Silv ...

  9. mvc之验证IEnumerable<T> 类型,多选框验证

    原文:mvc之验证IEnumerable<T> 类型,多选框验证 假设我们有这么一种需求,我们要同时添加年级和年级下面的多个班级,我们一般会像下面这种做法. Action中我们这样接收: ...

  10. HTML5新增核心工具——canvas

    原文:HTML5新增核心工具--canvas Canvas元素称得上是HTML5的核心所在,它是一个依靠JavaScript绘制华丽图像的元素. Canvas由一个可绘制地区HTML代码中的属性定义决 ...