近期在项目中为每一个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. Group and sum array of hashes by date

    I have an array of hashes like this: [{:created=>Fri, 22 Jan 2014 13:02:13 UTC +00:00, :amount=&g ...

  2. pig 的chararry不能用于比较的类型可以comparison operator

    pig 的chararry类型可以是由场,通过现场实地比较. element_id 这是chararray种类. 声明: no_app_category_mapping = filter no_ele ...

  3. CSS_img标签usemap属性图片中选择区域加入超链接

    例子: <IMG usemap="#Map" alt="" src="/images/banbian.jpg"> <map ...

  4. windows下利用OpenVPN搭建VPNserver

    一.OpenVPN是一款功能强大,可跨平台(支持Win 2000/XP/2003, Linux, Mac OS X, Solaris, FreeBSD, NetBSD, 和 OpenBSD)使用的SS ...

  5. 多线程学习之二坚不可摧模式Immutable pattern

    Immutable pattern[坚不可摧模式] 一:immutable pattern的参与者--->immutable(不变的)参与者        1.1:immutable参与者是一个 ...

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

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

  7. 快速构建Windows 8风格应用22-MessageDialog

    原文:快速构建Windows 8风格应用22-MessageDialog 本篇博文主要介绍MessageDialog概述.MessageDialog常用属性和方法.如何构建MessageDialog ...

  8. Java 多并发之原子访问(Atomic Access)

    在编程中,一个原子操作是只会出现一次的.一个原子操作在中间不会停止:要么全部发生要么一点也不发生.我们只有在原子操作完成之后才会看到原子操作的具体影响. 甚至是非常简单的表达式能够构造分解为简单操作的 ...

  9. OSG(OpenSceneGraphcow.osg)配置笔记

    OpenSceneGraph是一款高性能的3D图形开发库.广泛应用在可视化仿真.游戏.虚拟现实.高端技术研发以及建模等领域.使用标准的C++和OpenGL编写而成,可以运行在Windows系列.OSX ...

  10. Spring IOC 之个性化定制the nature of a bean

    1.生命周期回调 为了影响容器管理的bean的生命周期,你可以实现Spring的InitializingBean和DisposableBean接口.容器首先调用afterPropertiesSet() ...