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>

（save.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');
});

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

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

2 个答案: