JQuery Mobile中的JQuery show/hide

Question

我有一个非常基础的JQuery Mobile应用程序。当用户点击“设置”按钮时，我想将其重定向到另一个页面，提示他们输入电子邮件地址。我想要两个页面之间的漂亮“滑动”转换效果，但似乎需要权衡。

基本上，如果我在我的 "Setup" 按钮中使用 '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>

感谢你能提供帮助和见解。

- JQuery Mobile

Answer 1

不要在你的jQueryMobile代码中使用$(document).ready()。相反，捕获pageinit事件，如此处所述。

在这种情况下，您可能需要使用类似以下内容的东西：

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

- Pablo

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>

- DG3

Answer 3

你的 error div 应该在页面级别，而不是在页眉、页脚或主体之内。

- ViniciusC

Answer 4

我相信你遇到的问题是，如果没有使用rel =“external”属性，调用网页的方法将通过ajax进行，这意味着文档就绪函数不会再次触发。而rel =“external”属性将执行完整的回传，这将触发您的ready函数。

同样要注意的是，在使用ajax调用时，查询字符串也不是100％“新鲜”的。因此，我不得不多次强制执行完整的回传。

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

- OnResolve