JQuery在JQuery Mobile中显示/隐藏
我有一个非常基本的JQuery移动应用程序。当用户单击我的“设置”按钮时,我想将他们重定向到另一个页面,提示他们输入电子邮件地址。我想要两页之间的漂亮的“幻灯片”过渡。然而,似乎有一个权衡 基本上,如果我的设置按钮中有“rel=”external“,如下所示,用户将进入下一个屏幕。然而,没有过渡。但是如果我删除'rel=“external”“,我会得到一个转换,但是,在下一个屏幕的顶部有一个小的红色条。这个红色条显然是我的errMsg div。它类似于.hide代码不会被调用 在这种情况下,我应该如何调用.hide之类的函数?很明显,我最初想隐藏errMsg div。但我不知道如何做到这一点,同时仍然允许JQuery Mobile分配的良好转换 Home.htmlJQuery在JQuery Mobile中显示/隐藏,jquery,jquery-mobile,Jquery,Jquery Mobile,我有一个非常基本的JQuery移动应用程序。当用户单击我的“设置”按钮时,我想将他们重定向到另一个页面,提示他们输入电子邮件地址。我想要两页之间的漂亮的“幻灯片”过渡。然而,似乎有一个权衡 基本上,如果我的设置按钮中有“rel=”external“,如下所示,用户将进入下一个屏幕。然而,没有过渡。但是如果我删除'rel=“external”“,我会得到一个转换,但是,在下一个屏幕的顶部有一个小的红色条。这个红色条显然是我的errMsg div。它类似于.hide代码不会被调用 在这种情况下,我应
<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>
<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>
我的应用程序
Setup.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>
<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>
安装程序
电子邮件地址
$(文档).ready(函数(){
$(“#errorMsg”).hide();
});
感谢您提供的任何帮助/见解。我相信您遇到这个问题的原因是,如果不应用rel=“external”,则获取页面的调用将通过ajax完成,这意味着不会再次启动document ready函数。其中,rel=“external”属性将返回并执行完整的回发,这将触发您的就绪功能 同样值得注意的是,在使用ajax调用时,查询字符串也不是100%的“新鲜”。由于这个原因,我被迫做一篇完整的回帖的次数比我最初希望的要多 回到您的解决方案,或者使用external属性执行完整的回发,或者更改事件以允许它在ajax调用时触发。不要在jQueryMobile代码中使用
$(document).ready()
。如前所述,而是捕获pageinit
事件
在这种情况下,您可能需要使用以下内容:
$(':jqmData(role="page")').live('pageinit', function(event) {
$("#errorMsg").hide();
});
尝试更新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>
安装程序
电子邮件地址
$(文档).ready(函数(){
$(“#errorMsg”).hide();
});
您的错误
div应该在页面级别,在页眉、页脚或主目录之外