近期在项目中为每一个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. timesten备份和恢复

    ttIsql "DSN=ttwind;UID=cacheuser;PWD=cacheuser;OraclePWD=cacheuser;" --1.查看当前版本号 Command&g ...

  2. ajax form表单提交 input file中的文件

    ajax form表单提交 input file中的文件 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了 ...

  3. NSNotification、delegate和KVO的区别

    1.效率:delegate比nsnotification高.2. delegate方法比notification更加直接,最典型的特征是,delegate方法往往需要关注返回值, 也就是delegat ...

  4. Android Notification通知详细解释

    Android Notification通知具体解释  Notification: (一).简单介绍:         显示在手机状态栏的通知. Notification所代表的是一种具有全局效果的通 ...

  5. Cocos2d-x Lua 阅读Csv文件,使用数据更方便

    在我的书或出售之前,我的源代码,有Csvshadow文件. 也许这是偏见.我与工作将是最长的轮廓Csv,所以,我会帮助不大喜欢它的游戏. Csv文件,非常格式easy,也就是说,一个数据线,字段之间用 ...

  6. Object-C中Category类体验

    Object-C中Category类体验 Object-C开发的时候有的时候会用到Category类,类似于Java和C#中扩展类,就是如果你觉得如果你觉得常用的方法在String中没有,可以根据业务 ...

  7. Asp.net TextBox只能输入数字

    原文:Asp.net TextBox只能输入数字 <asp:textbox id="TextBox1" onkeyup="if(isNaN(value))execC ...

  8. PS抠出树叶树枝

    1.打开PS 2.加载树叶树枝图片 3.双击该图层,来解锁树叶树枝图层 4.通道面板,只留下蓝色 5.顶部菜单 -> 图像 -> 计算 -> 混合为正片叠底,得到一个新Alpha图层 ...

  9. three.js 源代码凝视(十六)Math/Frustum.js

    商域无疆 (http://blog.csdn.net/omni360/) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转载请保留此句:商域无疆 -  本博客专注于 敏捷开发 ...

  10. 【Android中Broadcast Receiver组件具体解释 】

    BroadcastReceiver(广播接收器)是Android中的四大组件之中的一个. 以下是Android Doc中关于BroadcastReceiver的概述: ①广播接收器是一个专注于接收广播 ...