我目前在不同页面中有几个操作按钮,并且每个按钮在单击时都会执行一些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

理想情况下,我想使用我以前的代码片段在按钮上仅注册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的不同方法,您应该能够通过.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上的例子。

10-05 20:38
查看更多