javascript - 在对话框按钮上使用 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 中绑定(bind)事件时，建议使用委托(delegate)绑定(bind)。基本上看看你的代码:

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

});

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

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

});

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

还有一件事，有 3 种类型的 jQuery Mobile 按钮和 2 种禁用它们的方法(不仅仅是一种)，阅读更多相关信息 here .