如何优雅地禁用/启用所有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调用时返回单击处理程序.

我的问题是...是有可能一概而论按钮禁用/启用,这样我就不必实现ajaxStart()和ajaxStop所有的UI按钮？

理想情况下,我想使用我之前的代码片段仅在按钮上注册click事件处理程序,然后使用.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

不同的方法,根据这个答案你应该能够获得对你以前的事件处理程序的引用.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.