把$ .mobile.changePage放在正确的地方
问题描述:
我想了解$ .mobile.changePage是如何工作的。我将方法$ .mobile.changePage放在DOM中最后一个元素后面的匿名函数中,它不起作用,但是如果我将它放在document.ready中,它可以正常工作。怎么来的?任何意见大加赞赏
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<!-- Start of first page -->
<div data-role="page" id="foo">
<div data-role="header">
<h1>Foo</h1>
</div><!-- /header -->
<div data-role="content">
<p>I'm first in the source order so I'm shown as the page.</p>
<p>View internal page called <a href="#bar">bar</a></p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<!-- Start of second page -->
<div data-role="page" id="bar">
<div data-role="header">
<h1>Bar</h1>
</div><!-- /header -->
<div data-role="content">
<p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>
<p><a href="#foo">Back to foo</a></p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<script>
(function(){
$.mobile.changePage($("#bar"), { transition: "slideup"});
})();// this doesn't work
$(document).ready(function(){
$.mobile.changePage($("#bar"), { transition: "slideup"});
})//this works
</script>
答
document ready
不工作,jQuery Mobile
正确。通常它会在页面加载到DOM
之前触发。
如果你想了解更多关于这个看看这个ARTICLE,要透明,这是我的个人博客。或找到它HERE。
为了使它工作,你需要使用正确的页面事件,像这样:
$(document).on('pagebeforeshow', '#foo', function(){
$.mobile.changePage($("#bar"), { transition: "slideup"});
});
与此同时,这不是一个很好的解决方案。在首页加载时不应更换页面,主要是因为它会导致jQuery Mobile
行为异常。以太网在第一页成功加载后执行(页面#foo
)或更改页面顺序,并让页面#bar
成为第一页。