在PhoneGap 2.9中使用jQuery/JavaScript的点击按钮事件不起任何作用

Click button event using jQuery/JavaScript in PhoneGap 2.9 does nothing

本文关键字：按钮 事件 作用 任何 JavaScript PhoneGap jQuery      更新时间：2023-09-26

我正在使用Phonegap 2.9和Eclipse Juno为android开发一个移动应用程序。我看到许多使用Javascript和JQuery的与按钮点击事件相关的帖子，但似乎什么都不起作用。我的意思是，当我点击按钮时，不会出现警报！我还尝试了<a href=...、<input ...和<button type="submit" ...，但它们都不适用于相同的.js。

我在.html文件中的头部是这样的：

 <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
    <title>Sign-Up</title>
    <link href='http://fonts.googleapis.com/css?family=Patrick+Hand|Permanent+Marker|Exo|Nunito|Limelight|Ubuntu|Montserrat|Audiowide|Architects+Daughter' rel='stylesheet' type='text/css'>
    <!-- import stylesheets -->
    <link rel="stylesheet" type="text/css" href="../css/sign-up.css">
    <link rel="stylesheet" type="text/css" href="../css/sign-up-eng-fonts.css">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
    <link rel="stylesheet" href="../jQuery-Mobile-Bootstrap-Theme-master/themes/Bootstrap.css">
    <!-- import js --> 
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8" src="../jss/connect.js"></script>
    <script type="text/javascript" charset="utf-8" src="../jss/sign-up.js"></script>
 </head>

我在.html文件中创建按钮的当前代码部分是：

                <div class="ui-body ui-body-b">
                    <fieldset class="ui-grid-a">
                        <div class="ui-block-a"><button type="submit" id="cancel" data-theme="d">Cancel</button></div>
                        <div class="ui-block-b">
                            <input type="button" value="Register" id="submitt" data-theme="a" /></div>
                            <!--<a href="#" data-inline="button" data-role="button" data-theme="a">Register</a>-->
                    </fieldset>
                </div>

connect.js包含以下代码：

document.addEventListener("deviceready", onDeviceReady, false);
    // PhoneGap is loaded and it is now safe to make calls PhoneGap methods
    //
    function onDeviceReady() {
        // checkConnection();
        document.addEventListener("offline", onOffline, false);
        document.addEventListener("online", onOnline, false);
    }
function onOffline() {
    navigator.notification.alert('Please enable your Wi-fi and re-open the application!', close_app, 'Wi-fi', 'Okay');
}
function close_app() {
    navigator.app.exitApp();
}
function onOnline() {
    }

我的sign-up.js包含这个：

document.addEventListener("deviceready", onDeviceReady, false);
 function onDeviceReady() {
        document.getElementById('submitt').addEventListener('click', checkk, false);
            function checkk(){
                 navigator.notification.alert("I am here.", null, 'Here', 'Okay');
            }
    }

问题：当我运行应用程序并按下按钮时，页面会保持原样。它甚至不会刷新或显示我写的警报。

当我在sign-up.html文件中使用onclick="register()尝试另一个解决方案，并在我的sign-up.js文件中使用函数register()时，Eclipse的LogCat会说：file:///android_asset/www/htmls/home.html: Line 1 : Uncaught ReferenceError: register is not defined。home.html是应用程序的第一页。但注册按钮在sign-up.html中-仅在此处我调用标题sign-up.js（包含register()）-

我终于解决了我的问题
这与按钮无关。问题出在JavaScripts上。

  • 首先，我更改了调用home.html和sign-up.html的JavaScripts的顺序
    （1.JQuerys from the web，2。cordova.js，3。connect.js，4。所有其他javaScripts）
    home.html:

    <title>Guide-Me For-All</title>
<link href='http://fonts.googleapis.com/css?family=Patrick+Hand|Permanent+Marker|Exo|Nunito|Limelight|Ubuntu|Montserrat|Audiowide|Architects+Daughter' rel='stylesheet' type='text/css'>
<!-- import stylesheets -->
<link rel="stylesheet" type="text/css" href="../css/home.css">
<link rel="stylesheet" type="text/css" href="../css/home-eng-fonts.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css" />
<link rel="stylesheet" href="../jQuery-Mobile-Bootstrap-Theme-master/themes/Bootstrap.css">
<!-- import js --> 
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="../jss/connect.js"></script>
<script type="text/javascript" charset="utf-8" src="../jss/change_page.js"></script>
<script src="../plugins/page-swipe-iscroll/iscroll.js"></script>
<script src="../plugins/page-swipe-iscroll/scroll.js"></script>

  • 在home.html中，我将导航到另一个页面的方式更改为：

                            <a href="#" data-role="button" data-theme="f" data-icon="heart" onclick="change_page();">Sign-Up Now!</a>

这是必需的，因为正如我在谷歌上读到的，最好从JavaScript而不是<a href="....."更改页面。

  • 因此，我创建了change_page.js。其内容如下：

document.addEventListener("deviceready", onDeviceReady, false);

// PhoneGap is ready
//
function onDeviceReady() {
    // Empty
}
// alert dialog dismissed
function alertDismissed() {
    // do something
}
// Show a custom alert
//
function change_page() {
    document.location.href = '../htmls/sign-up.html';
}

  • 在我的sign-up页面中，我将按钮更改为：

                                <a href="#" onclick="register();" data-role="button" data-theme="a">Register</a>

  • 在我的sign-up.js文件中，我写下了代码：

    document.addEventListener("deviceready", onDeviceReady, false);

    // PhoneGap is ready
//
function onDeviceReady() {
    // Empty
}
// alert dialog dismissed
function alertDismissed() {
    // do something
}
// Show a custom alert
//
function register() {
    navigator.notification.alert(
        'hello!',  // message
        alertDismissed,         // callback
        'Game Over',            // title
        'Done'                  // buttonName
    );
}

因此，主要问题是导航到下一页的方式，因为JavaScript只在第一个.html页中工作。希望它能帮助任何有同样问题的人！

相关文章：