Event click is not working after change html page using href

Question

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.

Answer 1

I resolved my problem by adding rel="external" attribute inside <a> tag.