如何在頁面轉換期間禁用工具欄按鈕？

Question

我正在使用我正在開發的jQuery Mobile站點中的external toolbar。我初始化它像這樣：

$(document).ready(function() { 
    $("[data-role='header'], [data-role='footer']").toolbar(); 
}); 

我有一對夫婦在工具欄上的按鈕，並想在頁面過渡禁用它們，這樣用戶就不能按他們多次，這似乎得到了一個框架，一個奇怪的狀態。我第一次嘗試一直監聽pagebeforeshow和pageshow事件以編程方式禁用和啓用按鈕：

$(function() { 
    $("[data-role='header'], [data-role='footer']").toolbar({ 
     create: function (event, ui) { 
      $(document).on('pagebeforeshow', function() { 
       $('#page-header .ui-btn').button('disable'); 
      }); 

      $(document).on('pageshow', function() { 
       $('#page-header .ui-btn').button('enable'); 
      }); 
     } 
    }); 
}); 

我有嵌套在這樣的代碼，因爲我不想，直到工具欄上有註冊的處理程序已初始化。不過，我運行到一個單獨的問題：

Uncaught Error: cannot call methods on button prior to initialization; attempted to call method 'disable'

由於我沒有明確初始化按鈕我自己，我不知道我知道如何/在那裏我可以等待它們被初始化。

有沒有更好的方法來解決這個問題，有沒有人有任何建議，讓這個工作？

Answer 1

使用.button()在input鍵入按鈕，重置並提交。對於錨點或按鈕標記，您需要添加/刪除ui-state-disabled類。

$(document).on("pagecontainerbeforehide", function() { 
    $('#page-header .ui-btn').addClass('ui-state-disabled'); 
}); 

$(document).on("pagecontainershow", function() { 
    $('#page-header .ui-btn').removeClass('ui-state-disabled'); 
}); 

Demo