10

我正在使用 Twitter Bootstrap 的按钮加载状态（http://twitter.github.com/bootstrap/javascript.html#buttons）。

HTML:

<input type="submit" class="btn" value="Register" id="accountRegister" data-loading-text="Loading..."/>

JS:

(function ($, undefined) {
    $("#accountRegister").click(function () {
        $(this).button('loading');
        $.ajax({
            type:"POST",
            url:"/?/register/",
            data:$("#loginForm").serialize(),
            error:function (xhr, ajaxOptions, thrownError) {
                $("#accountRegister").button('reset');
            },
            success:function (data) {
                $("#accountRegister").button('reset');
            }
        });
        return false;
    })
})(jQuery);

但是如果我有很多按钮，我需要编写很多函数（？）。当然我可以做这样的事情：

$(".ajax-button").bind("click", function() { 
     $(this).button("loading");})

我可以使用 jQuery Ajax 事件ajaxComplete

$(".ajax-button").bind("ajaxComplete", function() { 
     $(this).button("reset");})

但是这样，当任何Ajax 请求完成时，所有按钮都将设置为正常状态。

如果用户点击button1然后点击button2（两个按钮都在发送Ajax请求），当第一个Ajax请求完成时，它们将被设置为正常状态。如何确定我需要将哪个按钮设置为正常状态？

先感谢您。

更新

我只需要确定哪个按钮触发了某些操作（Ajax 请求），将其状态设置为正在加载，以及 Ajax 请求何时完成，将其状态设置为正常。

4

1 回答 1

9

我为我的问题找到了解决方案 =) 在阅读了 jQuery 文档后，我为我的系统编写了以下代码：

核心.js：

(function ($, undefined) {
    $.ajaxSetup({
        beforeSend:function (xhr, settings) {
            if (settings.context != undefined && settings.context.hasClass('btn')) {
                settings.context.button('loading');
            }
        },
        complete:function () {
            this.button('reset');
        }
    });
})(jQuery);

帐户.js：

(function ($, undefined) {
    $("#accountRegister").click(function () {
        $.ajax({
            context:$(this), // You need to set context to 'this' element
            //some code here
        });
        return false;
    })
})(jQuery);

这完美地工作。希望这对某人有用。

于 2013-03-04T16:50:29.070 回答