J'essaie de comprendre les événements de page mobile jquery dans une page Web html multipage. Lorsque j'essaie d'accéder à window2 dans le fichier index1.html, les événements de la page sont déclenchés et la transition est en cours.Les événements de page ne sont pas déclenchés lors de la navigation entre les pages de fichiers Web html multipages
Toutefois, si j'essaie de naviguer entre index1.html et index3.html, les événements de page de index3.html ne sont pas déclenchés et la transition de page est en cours. Lorsque j'ai essayé d'ajouter data-ajax = "false" à index3.html href, les événements page de page3.html sont en train d'être déclenchés. Cependant, la transition ne se produit pas.
Quelqu'un peut-il m'aider à comprendre 1) Pourquoi les événements ne se déclenchent-ils pas? 2) questions à l'aide de données ajax = "false"
Voici les pages que je suis en train de naviguer entre
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>
Si nous avons été utiles, vous pourriez peut-être accepter l'une de nos réponses. Merci. –