Question

我有一个非常基本的JQuery移动应用程序。当用户单击我的“设置”按钮时，我想将它们重定向到另一个页面，提示他们输入他们的电子邮件地址。我希望两页之间有一个漂亮的“幻灯片”转换。但是，似乎需要权衡利弊。

基本上，如果我的设置按钮中有'rel =“external”'，如下所示，用户将进入下一个屏幕。但是，没有过渡。但是如果我删除'rel =“external”'，我会得到一个转换，但是，下一个屏幕的顶部会有一个小红条。这个红条显然是我的errMsg div。就像.hide代码不会被调用。

在这种情况下，我该如何调用像.hide这样的函数？我最初想要隐藏errMsg div。但我不知道如何做到这一点，同时仍然允许JQuery Mobile分配的漂亮过渡。

Home.html中

<div data-role="page">
  <div data-role="header"><h1>My App</h1></div>

  <div data-role="content"> 
    <div><a href="/setup" rel="external" data-role="button">Setup</a></div>
  </div>
</div>

Setup.html

<div data-role="page">
    <div data-role="header"><h1>Setup</h1></div>

    <div data-role="content">   
        <div id="errorMsg" style="background-color:red; padding:2px 0px 2px 8px; margin-bottom:6px;"></div>

        <label for="emailTextBox">Email Address</label>
        <input id="emailTextBox" type="email" /><br />  
    </div>
</div>

<script type="text/javascript">
  $(document).ready(function () {
    $("#errorMsg").hide();
  });
</script>

感谢您提供的任何帮助/见解。

Answer 1

不要在jQueryMobile代码中使用$(document).ready()。而是按照here所述捕获pageinit事件。

在这种情况下，您可能需要使用以下内容：

$(':jqmData(role="page")').live('pageinit', function(event) {
  $("#errorMsg").hide();
});

Answer 2

尝试更新您的setup.html代码，如下所示

    <div data-role="page">
    <div data-role="header"><h1>Setup</h1></div>

    <div data-role="content">   
        <div id="errorMsg" style="background-color:red; padding:2px 0px 2px 8px; margin-bottom:6px;"></div>

        <label for="emailTextBox">Email Address</label>
        <input id="emailTextBox" type="email" /><br />  
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#errorMsg").hide();
         });
     </script>

</div>

Answer 3

我相信你遇到这个问题的是，如果rel =“external”是而不是，那么获取页面的调用是通过ajax来完成的，这意味着文档就绪函数不会再被触发。 rel =“external”属性将在哪里进行完整回发，将触发您的就绪功能。

值得注意的是，在使用ajax调用时，查询字符串也不是100％“新鲜”。由于这个原因，我被迫做了一次完整的回复，比我原先希望的要多。

回到您的解决方案，使用外部属性进行完整回发，或者更改事件以允许在进行ajax调用时触发它。

Answer 4

您的error div应位于页面级别，页眉，页脚或主页之外。

JQuery在JQuery Mobile中显示/隐藏

4 个答案: