我正在尝试理解多页html网页中的jquery移动页面事件。
当我试图导航到index1.html中的window2时,页面事件被触发,转换正在发生。
但是,如果我尝试在index1.html到index3.html之间导航,index3.html的页面事件不会被触发,页面转换正在发生。
当我尝试将数据ajax="false"添加到index3.html href时,page3.html的页面事件被触发。然而,这种转变并没有发生。
有人能帮我理解吗1) 为什么这些活动没有被解雇?2) 使用数据时的问题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>
这被称为单页模型,而不是多页。
由于JQM使用Ajax导航在页面之间切换,当您调用外部页面(例如Index2.html)时,它会加载该页面中的第一个data-role=page
,并忽略所有其他标记。
因此,为了解决第一个问题,您需要将该页面的JS代码放置在data-role=page
中,以便在该页面中加载。
当您使用data-ajax=false
或rel=external
时,您会阻止JQM通过Ajac加载页面,而是通过HTTP将其加载为加载了所有标签的新页面。这就是il事件工作的原因。
所以一些简单的解释。。。。。
1) 事件很可能正在启动,而您只是看不到输出。这很常见,您应该尝试使用不同的事件,以确保使用正确的事件。通过jsfiddle发布一些代码,我们可以帮助您进行调试。
2) 如果你关闭了链接的ajax,那么你实际上就是关闭了ajax转换,你只需要像直接访问页面一样加载页面。如果像这样加载页面时,确实看到了预期的结果,则证明页面事件正在触发。
请看这里,了解事件启动顺序的一些解释;
http://jqmtricks.wordpress.com/2014/03/26/jquery-mobile-page-events/