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

如何在页面转换期间禁用工具栏按钮？

1 个答案: