如何优雅地禁用/启用所有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？

理想情况下，我想用我以前的代码片段上的按钮只有单击事件处理程序，然后启用/使用.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

也许你可以附加你的处理程序到你的按钮的父元素delegate？这样只有一个处理函数绑定/解除绑定。

Answer 3

雅虎托管一个getElementByClass函数，您可以为所有的UI按钮指定一个类，如“disableMe”。然后使用getElementByClass（'disableMe'）返回要禁用的所有元素的数组。

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

Answer 4

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

Answer 5

您可以使用

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