使用href更改html页面后,事件单击无效

时间:2015-06-11 22:03:20

标签: javascript jquery html cordova cordova-plugins

我正在学习apache cordova 5.0开发一个简单的测试应用程序。我的应用程序有以下插件:

org.apache.cordova.console 0.2.13 "Console"
org.apache.cordova.device 0.3.0 "Device"
org.apache.cordova.dialogs 0.3.0 "Notification"

我也有两个页面使用相同的代码,但名称不同:

+ index.html    with its own index.js
+ second.html   with its own second.js

我正在使用jquery mobile 1.4.5和jquery 2.1.4。

body标签内的index.html的主要html是:

index.js是:

<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.
    };
})();

second.html内容为:

<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>

而second.js是:

(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.
    };
})();

我的问题是当我将页面从index.html更改为second.html时,我点击按钮,事件无效。但是第一次点击index.html就完美了。

1 个答案:

答案 0 :(得分:0)

我通过在rel="external"标记内添加<a>属性解决了我的问题。