Jquery mobile 在多页html web文件中的页面之间导航时不会触发页面事件_Jquery Mobile_Jquery Mobile Ajax

Jquery mobile 在多页html web文件中的页面之间导航时不会触发页面事件

jquery-mobile

Jquery mobile 在多页html web文件中的页面之间导航时不会触发页面事件,jquery-mobile,jquery-mobile-ajax,Jquery Mobile,Jquery Mobile Ajax,我试图理解多页html网页中的jquery移动页面事件当我试图在index1.html中导航到window2时，页面事件被触发，转换正在发生但是，如果我尝试在index1.html到index3.html之间导航，则不会触发index3.html的页面事件，并且正在发生页面转换当我尝试将数据ajax=“false”添加到index3.html href时，会触发page3.html的页面事件。然而，这种转变并没有发生有人能帮我理解吗 1）为什么事件没有被触发？ 2）使用数据ajax=

我试图理解多页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>


家
窗口内容1









窗口2
窗口内容2
$（文档）.bind（“pagebeforeload”，函数（事件，数据）
{
警报（“pagebeforeload data.url=“+data.url”）；
});
$（文档）.bind（“页面加载”，函数（事件，数据）
{
警报（“pageload data.url=”）；
});
$（文档）.bind（“pageloadfailed”，函数（事件、数据）
{
警报（“pageloadfailed data.url=“+data.url”）；
});
$（“#主页”）。在（“pagebeforecreate”上，函数（事件）
{
警报（“pagebeforecreate id=“+this.id”）；
});
$（“div:jqmData（role=page）”）。在（“pagecreate”上，函数（事件）
{
警报（“pagecreate id=“+this.id”）；
});
$（“div:jqmData（role=page）”）。在（“pageinit”上，函数（事件）
{
警报（“pageinit id=“+this.id”）；
});
$（“div:jqmData（role=page）”）.bind（“pagebeforeshow”，函数（事件，用户界面）
{
警报（“显示前页面”）；
});
$（“div:jqmData（role=page）”）.bind（“pageshow”，函数（事件，用户界面）
{
警报（“页面显示”）；
});
$（“div:jqmData（role=page）”）.bind（“pagebeforehide”，函数（事件，ui）
{
警报（“pagebeforehide”）；
});
$（“div:jqmData（role=page）”）.bind（“pagehide”，函数（事件，用户界面）
{
警报（“页面隐藏”）；
});
**index3.html**
窗口3
窗口内容3
$（“div:jqmData（role=page）”）.bind（“pagebeforeshow”，函数（事件，用户界面）
{
警报（“显示前第3页”）；
});
$（“div:jqmData（role=page）”）.bind（“pageshow”，函数（事件，用户界面）
{
警报（“pageshow3”）；
});
$（“div:jqmData（role=page）”）.bind（“pagebeforehide”，函数（事件，ui）
{
警报（“pagebeforehide3”）；
});
$（“div:jqmData（role=page）”）.bind（“pagehide”，函数（事件，用户界面）
{
警报（“pagehide3”）；
});

所以简单解释一下

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

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

看看这里，了解一些事件发生顺序的解释

因此，一些简单的解释

看看这里，了解一些事件发生顺序的解释

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

由于JQM使用Ajax导航在页面之间切换，当您调用外部页面（例如Index2.html）时，它首先加载该页面中的

data role=page

，并忽略所有其他标记

因此，要解决第一个问题，需要将该页面的JS代码放在

data role=page

中，以便在页面中加载

当您使用

data ajax=false

或

rel=external

时，您会阻止JQM通过Ajac加载页面，而是通过HTTP将其作为加载了所有标记的新页面加载。这就是il事件起作用的原因