JQuery 在 JQuery Mobile 中显示/隐藏

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()。相反，捕获 pageinit 事件，如所述 here .

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

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