<!DOCTYPE html>
<html>
<head>
<link data-require="jquery.mobile.1.4.4@1.4.4" data-semver="1.4.4" rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css" />
<script data-require="jquery.mobile.1.4.4@1.4.4" data-semver="1.4.4" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script data-require="jquery.mobile.1.4.4@1.4.4" data-semver="1.4.4" src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div data-role="page" id="main">
<div data-role="header" data-position="fixed">
<h1>Home Page</h1>
</div>
<div role="main" class="ui-content">
<p>Content</p>
<a href="#second" class="ui-btn">Second Page</a>
</div>
<div data-role="footer" data-position="fixed">
<h1>Footer</h1>
</div>
</div>
<div data-role="page" id="second">
<div data-role="header" data-position="fixed" data-add-back-btn="true">
<h1>Second Page</h1>
</div>
<div role="main" class="ui-content">
<p>Content</p>
</div>
<div data-role="footer" data-position="fixed">
<h1>Footer</h1>
</div>
</div>
</body>
</html>
$(document).on("pagecontainerbeforechange", function(e, data) {
if (typeof data.toPage == "string") {
console.info(e.type, "String");
console.log("toPage", data.toPage);
console.log("absUrl", data.absUrl);
console.log("--------------------");
}
if (typeof data.toPage == "object") {
console.info(e.type, "Object");
console.log("toPage", data.toPage);
console.log("absUrl", data.absUrl);
console.log("--------------------");
}
}).on("pagecontainerbeforetransition", function(e, data) {
console.info(e.type, "Object");
console.log("toPage", data.toPage);
console.log("absUrl", data.absUrl);
console.log("--------------------");
});
/* Styles go here */
#jQuery Mobile 1.4
##PageContainer events
###pagecontainerbeforechange vs. pagecontainerbeforetransition
http://jqmtricks.wordpress.com/2014/07/13/pagecontainerbeforechange/