如何優雅地禁用/啓用所有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 
});