簡體   English   中英

在PhoneGap 2.9中使用jQuery / JavaScript的單擊按鈕事件不起作用

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

我正在使用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 definedhome.html是應用程序的第一頁,但寄存器按鈕在。 sign-up.html -只有在這里我稱之為頭sign-up.js (包含register() )-

終於設法解決了我的問題。
它與按鈕無關。 問題出在JavaScript上。


  • 首先,我更改了在home.htmlsign-up.html調用JavaScript的順序。
    (1.來自Web的JQuery,2。cordova.js,3。connect.js,4。所有其他javaScript)
    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> 

這是必需的,因為當我在Google中閱讀時,最好從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頁中起作用。 希望它可以幫助遇到同樣問題的任何人!

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM