在多页html Web文件中的页面之间导航时，不会触发页面事件 [英] Page events are not triggered while navigating between pages in multipage html web files
问题描述
我正在尝试了解多页html网页中的jQuery移动页面事件.
I am trying to understand jquery mobile page events in multi page html web page.
当我尝试导航到index1.html中的window2时，将触发页面事件并且正在发生过渡.
when I am trying to navigate to window2 within the index1.html , the page events are being triggered and transition is happening.
但是，如果我尝试在index1.html到index3.html之间导航，则不会触发index3.html的页面事件，并且正在发生页面转换.
However if I try to navigate between index1.html to index3.html the page events of index3.html are not being triggered and page transition is happening.
当我尝试将data-ajax ="false"添加到index3.html href时，将触发page3.html的页面事件.但是，过渡并没有发生.
when I tried with adding data-ajax ="false" to index3.html href, the page events of page3.html are being fired. However , the transition is not happening.
有人可以帮我理解吗 1)为什么事件没有被解雇? 2)关于使用data-ajax ="false"
can someone pls help me understand 1)why the events are not getting fired? 2)issues in using data-ajax="false"
下面是我要浏览的页面
index1.html:
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="user-scalable=no,width=device-width" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>Home</h1>
</div>
<div data-role="content">
<p> Window content 1 </p>
<a href="#win2"> Window 2 (into the DOM) </a>
<br /><br />
<a href="index3.html" data-transition="pop" >
Window 3 in index3.html (data-dom-cache=false) </a>
<br /><br />
<br /><br />
</div>
</div>
<div data-role="page" id="win2" data-add-back-btn="true">
<div data-role="header">
<h1>Window 2</h1>
</div>
<div data-role="content">
<p> Window content 2 </p>
</div>
</div>
</body>
</html>
$(document).bind ("pagebeforeload", function (event, data)
{
alert ("pagebeforeload data.url = " + data.url);
});
$(document).bind ("pageload", function (event, data)
{
alert ("pageload data.url = ");
});
$(document).bind ("pageloadfailed", function (event, data)
{
alert ("pageloadfailed data.url = " + data.url);
});
$("#home").on ("pagebeforecreate", function (event)
{
alert ("pagebeforecreate id=" + this.id);
});
$("div:jqmData(role=page)").on ("pagecreate", function (event)
{
alert ("pagecreate id=" + this.id);
});
$("div:jqmData(role=page)").on ("pageinit", function (event)
{
alert ("pageinit id=" + this.id);
});
$("div:jqmData(role=page)").bind ("pagebeforeshow", function (event, ui)
{
alert("pagebefore show");
});
$("div:jqmData(role=page)").bind ("pageshow", function (event, ui)
{
alert("pageshow");
});
$("div:jqmData(role=page)").bind ("pagebeforehide", function (event, ui)
{
alert("pagebeforehide");
});
$("div:jqmData(role=page)").bind ("pagehide", function (event, ui)
{
alert("pagehide");
});
**index3.html**
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=Content-Type content=text/html;charset=iso-8859-1 />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="win3" data-add-back-btn="true">
<div data-role="header">
<h1>Window 3</h1>
</div>
<div data-role="content">
<p> Window content 3 </p>
</div>
</div>
</body>
</html>
<script>
$("div:jqmData(role=page)").bind ("pagebeforeshow", function (event, ui)
{
alert("pagebefore show3");
});
$("div:jqmData(role=page)").bind ("pageshow", function (event, ui)
{
alert("pageshow3");
});
$("div:jqmData(role=page)").bind ("pagebeforehide", function (event, ui)
{
alert("pagebeforehide3");
});
$("div:jqmData(role=page)").bind ("pagehide", function (event, ui)
{
alert("pagehide3");
});
</script>
推荐答案
这称为单页模型，而不是多页.
当您调用外部页面(例如， Index2.html，它将首先加载该页面中的data-role=page，而忽略所有其他标签.
As JQM uses Ajax Navigation to switch between pages, when you call an external page e.g. Index2.html, it loads first data-role=page in that page and it neglects all other tags.
因此，要解决您的第一个问题，您需要将该页面的JS代码放入data-role=page内，以便在页面内加载.
Hence, to solve you first problem, you need to place JS code of that page inside data-role=page to get loaded within the page.
当使用data-ajax=false或rel=external时，可以防止JQM通过Ajac加载页面，而是通过HTTP作为包含所有标签已加载的新页面进行加载.这就是il事件起作用的原因.
When you use data-ajax=false or rel=external, you prevent JQM from loading page via Ajac and instead it is load via HTTP as a fresh page with all tags loaded. That's why il event works.
这篇关于在多页html Web文件中的页面之间导航时，不会触发页面事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
