Page change events poorly documented/implemented #3977
Description
The pagebeforechange, pagechange, and pagechangefailed events are fired on the page container element and not the currently active page. This is inconsistent with the pageinit, pagebeforehide, pagebeforeshow, pagehide, and pageshow events which all fire on the currently active page. These events should either be renamed, or modified to occur on the active page. Consider the following:
<div id="container">
<div data-role="page" id="pg1">
<p>This is page 1</p>
<a href="#pg2" data-role="button">Next</a>
</div>
<div data-role="page" id="pg2">
<p>This is page 2</p>
</div>
</div>
<script>
$(document).delegate(
"#pg1",
"pagebeforechange",
function(){
// This code will never run
alert("About to transition away from page 1");
}
);
$(document).delegate(
"#container",
"pagebeforechange",
function(){
// This code will run
alert("The page is about to change");
}
);
</script>
Note: - If a container is not defined, these events will fire on the body element.