I am learning apache cordova 5.0 developing a simple Test Application. My application has the following plugins :
org.apache.cordova.console 0.2.13 "Console"
org.apache.cordova.device 0.3.0 "Device"
org.apache.cordova.dialogs 0.3.0 "Notification"
I also have two pages with the same code but with different name :
+ index.html with its own index.js
+ second.html with its own second.js
I am working with jquery mobile 1.4.5 and jquery 2.1.4.
The main html for index.html inside the body tag is :
The index.js is :
<div id="home" data-role="page">
<div data-role="header">
<h1>Laboratory 02</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li><a href="second.html">Local Storage</a></li>
</ul>
<button id="display-button" class="ui-btn">Display message</button>
</div>
</div>
<script src="cordova.js"></script>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/jquery.mobile-1.4.5.js"></script>
<script src="js/index.js"></script>
(function() {
document.addEventListener('deviceready', onDeviceReady.bind(this), false);
function onDeviceReady() {
// Handle the Cordova pause and resume events
document.addEventListener('pause', onPause.bind(this), false);
document.addEventListener('resume', onResume.bind(this), false);
$('#display-button').bind('click', function() {
navigator.notification.alert('You clicked me', null, 'Alert', 'Close');
});
};
function onPause() {
// TODO: This application has been suspended. Save application state here.
};
function onResume() {
// TODO: This application has been reactivated. Restore application state here.
};
})();
The second.html content is :
<div id="home" data-role="page">
<div data-role="header">
<h1>Local storage</h1>
</div>
<div data-role="content">
<button id="display-button" class="ui-btn">Display message</button>
</div>
</div>
<script src="cordova.js"></script>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/jquery.mobile-1.4.5.js"></script>
<script src="js/second.js"></script>
And the second.js is :
(function() {
document.addEventListener('deviceready', onDeviceReady.bind(this), false);
function onDeviceReady() {
// Handle the Cordova pause and resume events
document.addEventListener('pause', onPause.bind(this), false);
document.addEventListener('resume', onResume.bind(this), false);
$('#display-button').bind('click', function() {
navigator.notification.alert('You clicked me 2', null, 'Alert', 'Close');
});
};
function onPause() {
// TODO: This application has been suspended. Save application state here.
};
function onResume() {
// TODO: This application has been reactivated. Restore application state here.
};
})();
My problem is when I change the page from index.html to second.html and I click the button the event is not working. But the first click on index.html is working perfectly.
I resolved my problem by adding
rel="external"
attribute inside<a>
tag.