1

我正在使用 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 可以工作。但是一旦我打开对话框，它就不起作用了。

提前感谢您的帮助。

4

2 回答 2

2

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

在您的情况下，如果您的 javascript 在您的页面之间分开，如果它被放置在 HEAD 中，它将被丢弃（与其余的 HEAD 内容一起）。在这里您可以找到解决方法。

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

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

});

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

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

});

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

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

于 2013-05-24T08:21:00.343 回答
0

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

我没有使用确认按钮上的课程，然后一切似乎都奏效了。给它一个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');
});

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

于 2013-05-24T07:55:34.460 回答