Home/ Questions/Q 8628247
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T08:29:20+00:00

Hi I have two html pages in my mobile application as follows: <!DOCTYPE html>

  • 0

Hi I have two html pages in my mobile application as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile: Demos and Documentation</title>

<link rel="stylesheet"  href="jquery.mobile/jquery.mobile-1.1.0.css" />
<link rel="stylesheet" href="docs/assets/css/jqm-docs.css" />
<link rel="stylesheet" href="docsdemos-style-override.css" />
<script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
<!-- Uncomment following line to access PhoneGap APIs (not necessary to use PhoneGap to package web app) -->
<!-- <script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"></script>-->


</head> 
<body> 
<div data-role="page" id="jqm-home" class="type-home">
<div data-role="content">   

     <a href="example.html"  data-role="button" id="myButton">Index</a>         

</div>



</div>
</body>
</html>

my example.html is like:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile: Demos and Documentation</title>

<link rel="stylesheet"  href="jquery.mobile/jquery.mobile-1.1.0.css" />
<link rel="stylesheet" href="docs/assets/css/jqm-docs.css" />
<link rel="stylesheet" href="docsdemos-style-override.css" />
<script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
<!-- Uncomment following line to access PhoneGap APIs (not necessary to use PhoneGap to package web app) -->
<!-- <script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"></script>-->


</head> 
<body> 
<div data-role="page" id="jqm-home" class="type-home">
<div data-role="content">   

     <a href="example.html"  data-role="button" id="myButton1">Test</a>         

</div>

<script type="text/javascript">
    window.onbeforeunload = function(evt) {
        console.log ("*****************");
    } 
</script>




</div>


</body>
</html>

Now suppose on click of Index button I goes to example.html page. on click of back button in example.html it again goes to index.html. everything is fine, but it does not print console.log (“********“); If i press one more back on index.html then it prints it, what I want is it should print that on click of back button when I am on example.html.

Whats wrong in above code? and why it behave like this? Any suggestion will be appreciated thanks in advance.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    In Jquery Mobile standard use you basically stay on the same page during your hole experience on the site. “Changing” page basically adds content dynamically to the current document, meaning it will not trigger your onbeforeunload event.
    You can however use jquery mobile events, which one depends on exactly what kind of action you want to take. Most probably you would be looking at pagebeforehide or pagehide

    • 0