在对话框按钮上使用 ui-disabled

Question

我正在使用 jquery mobile 并且在 <form> 中我有“保存”和“编辑”按钮（<a> 带有 data-role="button" 的标签）。单击保存按钮后，将打开一个对话框/确认。在这个对话框中是通常的确认/取消选项。

我想要发生的是，一旦单击“确认”并使用 data-rel="back" 返回表单页面，我希望禁用保存按钮，并且默认禁用的编辑按钮变为已启用。

HTML：

<!--save button--><a class="save_button" data-role="button" href="save.html" data-rel="dialog" data-transition="pop">Save/Enter Line-Up</a>
<!--edit button--><a class="edit_button" data-role="button" href="edit.html" data-rel="dialog" data-transition="pop">Edit Line-Up</a>

（保存.html）：

<div data-role="content">   

    <p>Do You Want To Save?</p>

    <a class="confirm_button" href="#" data-role="button" data-rel="back">Confirm</a>
    <a class="cancel_button" href="#" data-role="button" data-rel="back">Cancel</a>

</div><!-- /content -->

JS：

$(document).ready(function() {

$('.edit_button').addClass('ui-disabled');
        /*edit button*/

    $('.confirm_button').on("click", function() {
      $('.edit_button').removeClass('ui-disabled');
      $('.save_button').addClass('ui-disabled');
    });
});

我无法让它工作。如果我不离开页面（即，如果确认按钮与保存和编辑按钮在同一页面上），上述 JS 就可以工作。但是一旦我打开对话框，它就不起作用了。

提前感谢您的帮助。

Answer 1

你没有提到一件重要的事情。根据我所拥有的，您正在使用几个 html 文件。也许您不知道，但 jQuery Mobile 的工作方式与其他页面略有不同。主要是在加载第一页时，其全部内容将被加载到 DOM（HEAD 和 BODY）中。但只有 BODY 会从其他页面加载。如果您考虑这是正常情况，如果 DOM 中已经有 HEAD，则无需加载其他页面 HEAD-s。

在您的情况下，如果您的 javascript 在您的页面之间是分开的，那么如果它被放置在 HEAD 中，它将被丢弃（连同其余的 HEAD 内容）。 Here您可以找到解决方法。

如果您的所有 javascript 都已放在第一个 HTML 文件中，那么您还有另一个问题。在 jQuery Mobile 中绑定事件时，建议使用委托绑定。基本上看你的代码：

$('#confirmButton').on('click', function(){

});

如果在该按钮加载到 DOM 之前绑定了此事件，则之后它将不起作用。为了解决这个问题，我们需要使用委托绑定，在这种情况下，元素是否存在/不存在于 DOM 中并不重要，因为事件绑定到某个 perenet 元素甚至更好的文档：

$(document).on('click', '#confirmButton',function(){

});

最后一件事。如果可能，不要使用 jQuery Mobile 准备好的文档，有时它会在页面加载到 DOM 之前触发。但有一个解决办法。 jQuery Mobile 开发人员已经创建了页面事件来解决这个问题。 Here您可以阅读更多相关信息。

还有一件事，有 3 种类型的 jQuery Mobile 按钮和 2 种禁用它们的方法（不仅仅是一种），请阅读更多信息here。

Answer 2

好吧，我尽可能地重现了您的问题，而且我似乎没有任何问题。但经过一些变化后，我发现了一种情况，我也无法禁用该按钮。

我没有使用确认按钮上的类，然后一切似乎都起作用了。给它一个id，我相信它应该可以解决。

<a class="confirm_button" id="confirmButton" href="#" data-role="button" data-rel="back">Confirm</a>

然后在你的 js 中：

$('#confirmButton').on('click', function(){
   $('.edit_button').removeClass('ui-disabled');
   $('.save_button').addClass('ui-disabled');
});

根据我的尝试，现在应该可以了。