如何优雅地禁用/启用所有 jQuery UI 按钮？

Question

我目前在不同的页面中有几个操作按钮，每个按钮在单击时都会执行一些 AJAX 调用。换句话说，我到处都有这样的代码：-

$("#searchButton")
    .button()
    .click(function() {
        ...
        $.get(url, { data: ...},  function(data) { ... });
        ...
    });

在进行一些测试后，似乎某些 AJAX 调用在调用回调函数之前至少需要几秒钟以上的时间来处理。

我的计划是在进行 AJAX 调用时禁用该按钮，并在 AJAX 调用完成后重新启用它。这是为了防止用户在处理请求时多次单击按钮。我发现的一种解决方案是利用 unbind() 和 bind() 函数。修改我的代码后，现在是这样的：-

var searchButtonClickHandler = function() {
    ...
    $.get(url, { data: ...},  function(data) { ... });
    ...
};

$("#searchButton")
    .button()
    .ajaxStart(function() {
        $(this).button("disable").unbind("click");
    })
    .ajaxStop(function() {
        $(this).button("enable").bind("click", searchButtonClickHandler);
    })
    .click(searchButtonClickHandler);

此代码运行良好。基本上，它会在进行 AJAX 调用时删除单击处理程序，并在 AJAX 调用完成时添加回单击处理程序。

我的问题是......是否可以概括按钮禁用/启用，以便我不必在所有 UI 按钮上实现 ajaxStart() 和 ajaxStop？

理想情况下，我想使用我之前的代码 sn-p 仅在按钮上注册单击事件处理程序，然后使用 .ui-button 选择器启用/禁用所有按钮，类似这样...

$(".ui-button")
    .ajaxStart(function() {
        $(this).button("disable").unbind("click");
    })
    .ajaxStop(function() {
        // not sure how to bind the handler here
        $(this).button("enable").bind("click", ?? );
    });

...但是，这不起作用，我在此处绑定点击处理程序时遇到了麻烦。

我想得越多，似乎我需要创建一个按钮生成器函数来执行此操作，例如：-

var createButton = function(selectorName, clickHandler) {
    $(selectorName)
        .button()
        .ajaxStart(function() {
            $(this).button("disable").unbind("click");
        })
        .ajaxStop(function() {
            $(this).button("enable").bind("click", clickHandler);
        })
        .click(clickHandler);
};

// create button like this
createButton("#searchButton", function() {
    ...
    $.get(url, { data: ...},  function(data) { ... });
    ...
});

...但是这种方法只会禁用/启用所选按钮，我想将其应用于所有 UI 按钮。

有没有人有更好的方法来禁用/启用页面中的所有按钮？

谢谢。

Answer 1

不同的方法，根据这个answer，您应该能够通过.data("events");获得对您之前的事件处理程序的引用

将它与您的示例放在一起，它应该如下所示：

$(".ui-button")
    .ajaxStart(function() {
        var events = $(this).data("events");
        $(this).data("oldEvent", events.click[0]);
        $(this).button("disable").unbind("click", events.click[0]);
    })
    .ajaxStop(function() {
        var oldClick = $(this).data("oldEvent");
        $(this).button("enable").bind("click", oldClick.handler);
});

不确定这是否会完全工作，还在搞乱 jsfiddle。

更新

这应该可以工作，例如jsfiddle。

Answer 2

您可以使用$('input[type=button]').attr('disabled','disable'); 禁用所有按钮，而不是将点击事件绑定和解除绑定到按钮...您也可以使用deferred jquery 对象，这里是example

Answer 3

也许您可以使用delegate 将处理程序附加到按钮的父元素？这样，只有一个处理函数可以绑定/取消绑定。

Answer 4

Yahoo 拥有一个 getElementByClass 函数，您可以为所有 UI 按钮分配一个类，例如“disableMe”。然后使用 getElementByClass('disableMe') 返回一个包含所有要禁用的元素的数组。

链接：http://developer.yahoo.com/yui/dom/

Answer 5

你可以使用

$("button").each(function(){
    //your code here
});