我正在使用jQuery Mobile 1.4.5并且我创建了两个页面:
test1.html:
<body>
<div data-role="page" id="test1">
<div data-role="header">
<h1>Test1 page</h1>
</div><!-- /header -->
<div data-role="content">
Test1 page
<a href="test2.html">foo</a>
</div><!-- /content -->
<div data-role="footer">
<h4>Footer</h4>
</div><!-- /footer -->
<script>
$(document).off("pagecontainershow").on("pagecontainershow", function () {
var activePage = $.mobile.pageContainer.pagecontainer("getActivePage");
var activePageId = activePage[0].id;
switch (activePageId) {
case 'test2':
alert('test2 page from test1 page js');
break;
case 'test1':
alert('test1 page from test1 page js');
break;
default:
}
});
</script>
</div>
</body>
test2.html:
<body>
<div data-role="page" id="test2">
<div data-role="header">
<h1>Test2 page</h1>
</div><!-- /header -->
<div data-role="content">
Test2 page
<a href="test1.html">foo</a>
</div><!-- /content -->
<div data-role="footer">
<h4>Footer</h4>
</div><!-- /footer -->
<script>
$(document).off("pagecontainershow").on("pagecontainershow", function () {
var activePage = $.mobile.pageContainer.pagecontainer("getActivePage");
var activePageId = activePage[0].id;
switch (activePageId) {
case 'test2':
alert('test2 page from test2 page js');
break;
case 'test1':
alert('test1 page from test2 page js');
break;
default:
}
});
</script>
</div>
</body>
当我加载test1.html时,我收到提醒读取"test1 page from test1 page js"
,告诉我加载页面新鲜会触发pagecontainershow
事件。到现在为止还挺好。现在,我点击链接转到test2.html,我收到警告信息"test2 page from test2 page js"
,显示指向test2.html页面的链接触发了pagecontainershow
事件。
现在我点击链接返回test1.html,但是我收到警告"test1 page from test2 page js"
,它指示在返回test1.html时没有触发pagecontainershow
事件。这是事件如何工作,即它只在第一次加载每个页面时触发?如果是这样,每次显示页面时是否会触发另一个事件,无论是通过链接还是后退按钮?
有趣的是,如果我将脚本块从data-role=page
div内部移动到外部(但仍在body块内)并清除缓存,我会得到不同的行为。在这种情况下,似乎只有test1.html pagecontainershow
事件触发,test2.html事件永远不会触发;我只看到"test 1|2 page from test1 page js"
,而不是"... from test2 page js"
。
这个jQuery Mobile的东西还是很新的,有人可以说明这些东西是如何工作的吗?我做了一件可怕的错事吗?
答案 0 :(得分:0)
当你从test1导航到test2时,jQM实际上找到了第一个data-role="page"
div并通过AJAX将它加载到test1的DOM中。那时,您的脚本运行.off("pagecontainershow")
,它会停用现有代码,然后激活test2中的代码。当你导航回test1时,jQM已经在DOM中拥有它,所以它只是隐藏了test2 div并显示了test1 div。 test2中的脚本仍处于活动状态。
如果将test2中的代码移出data-role="page"
div,它永远不会被加载到test1 DOM中,因此test1中的原始脚本继续工作。
阅读本文: http://demos.jquerymobile.com/1.4.5/navigation-linking-pages/
如果你想要真正独立的页面,你可以覆盖页面的AJAX加载,但是你会失去漂亮的过渡。如果您喜欢AJAX导航,只需将所有代码放在第一页(或第一页引用的文件)中,然后任何页面加速代码都可以根据需要放在data-role="page"
div中。