而在多页HTML网页文件，网页间导航页面事件不会被触发(Page events are not tr

我想了解多页HTML网页jQuery Mobile的页面事件。

当我试图导航到index1.html内窗口2，被触发的页面事件和转型正在发生的事情。

但是，如果我尝试index1.html之间导航到index3.html index3.html的页面事件未触发和页面转变正在发生。

当我添加数据的Ajax =“false”表示index3.html HREF试过，page3.html的页面事件被解雇。然而，过渡没有发生。

有人可以请帮助我理解1）为什么事件不会被炒鱿鱼吗？ 2）在使用数据AJAX =“假”问题

下面是我想之间的导航页面

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>

Answer 1:

这就是所谓的单页模式 ，而不是多页。

作为JQM使用Ajax导航，当你调用外部网页如Index2.html，页面之间切换，它首先加载data-role=page在该页和它忽视了其他所有的标签。

因此，要解决你的第一个问题，您需要将内部的页面的JS代码data-role=page获得页面中加载。

当您使用data-ajax=false或rel=external ，可以防止加载页面JQM通过AJAC，而是它是通过HTTP负载与加载的所有标签新的一页。这就是为什么金正日事件的作品。

Answer 2:

因此，一些简单的解释.....

1）该事件最有可能被解雇，你只是没有看到输出。这是很常见的，你应该尝试使用不同的事件，以确保您使用的是正确的。通过发布的jsfiddle一些代码，我们可以帮你调试。

2）如果把阿贾克斯关闭你正在有效地关闭AJAX转换，你只是加载网页，就好像它是直接访问链接。如果在加载网页这样，你就看到预期的结果，它证明了页面事件已触发。

看看这里的秩序的一些解释中，事件引发;

http://jqmtricks.wordpress.com/2014/03/26/jquery-mobile-page-events/