在多页 html Web 文件中的页面之间导航时不会触发页面事件答案

【问题标题】：Page events are not triggered while navigating between pages in multipage html web files在多页 html Web 文件中的页面之间导航时不会触发页面事件
【发布时间】：2014-04-25 20:11:27
【问题描述】：

我正在尝试了解多页 html 网页中的 jquery 移动页面事件。

当我试图导航到 index1.html 中的 window2 时，页面事件被触发并且正在发生转换。

但是，如果我尝试在 index1.html 和 index3.html 之间导航，则不会触发 index3.html 的页面事件并且正在发生页面转换。

当我尝试将 data-ajax ="false" 添加到 index3.html href 时，正在触发 page3.html 的页面事件。但是，过渡并未发生。

有人可以帮我理解吗 1）为什么事件没有被解雇？ 2) 使用 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>

【问题讨论】：

如果我们提供了帮助，也许您可以接受我们的答案之一。谢谢。

标签： jquery-mobile jquery-mobile-ajax

【解决方案1】：

这称为单页模型，而不是多页。

由于 JQM 使用 Ajax Navigation 在页面之间切换，当您调用外部页面时，例如Index2.html，它首先加载该页面中的data-role=page，并忽略所有其他标签。

因此，要解决您的第一个问题，您需要将该页面的 JS 代码放在 data-role=page 中以在页面内加载。

当您使用data-ajax=false 或rel=external 时，您会阻止JQM 通过Ajac 加载页面，而是通过HTTP 加载所有标签的新页面。这就是 il 事件起作用的原因。

【讨论】：

当我在 data-role="page" 中编写事件时触发事件。但这是这样做的标准方式吗？理想情况下，我们应该在 data-role="page" 之前编写所有脚本函数。请指导我最佳做法。
没有。代码进入“页面”内部 data-role=page 之外的所有内容在第一页之后都会被忽略。
所以我在这里假设在 data-role="page" 中包含页面事件和脚本。感谢您的支持。

【解决方案2】：

所以一些简单的解释.....

1) 事件很可能正在触发，而您只是看不到输出。这很常见，您应该尝试使用不同的事件以确保使用正确的事件。通过 jsfiddle 发布一些代码，我们可以帮助您调试它。

2) 如果您为链接关闭 ajax，您实际上是在关闭 ajax 转换，您只需像直接访问页面一样加载页面。如果当您像这样加载页面时，确实看到了预期的结果，则证明页面事件正在触发。

在这里查看事件触发顺序的一些解释；

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

【讨论】：

当我试图在多个单页模板之间导航时，我可能无法在 jsfiddel 中发布代码以进行调试。请指导。
那么任何人都无能为力。
当我在 data-role="page" 中编写事件时触发事件。但这是这样做的标准方式吗？理想情况下，我们应该在 data-role="page" 之前编写所有脚本函数。这是触发事件的理想方式吗？感谢您的支持。
您确实需要阅读更多有关事件的信息，然后针对似乎不起作用的位尝试不同的事件。
目前您的所有脚本都在 HTML 标记之外。这甚至在一个简单的 HTML 页面上都行不通，更不用说 jqm 页面了。所有脚本都需要在页面 div 内。