ReferenceError: Can't find variable: $, jquerymobile + phonegap

问题

I'm a newbie. I want to save a value inputted by the user in the preferences manager, and have it automatically populate a field(if it has been filled by the user). I get a "ReferenceError: Can't find variable: $ at file:///android_asset/www/index.html:53" in my Android logcat. Also my app crashes. What am I doing wrong?

<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <!--<link rel="stylesheet" type="text/css" href="css/index.css" />-->
    <link rel="stylesheet" type="text/css" href="css/jquery.mobile.structure-1.3.2.css" />
    <link rel="stylesheet" type="text/css" href="css/jquery.mobile.theme-1.3.2.css" />
    <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.2.css" />
    <title>Hello World</title>

    <script type="text/javascript">
        document.addEventListener("deviceready", onDeviceReady, false);

        //once the device ready event fires up, you can safely do your thing
        function onDeviceReady(){
            //document.getElementById("welcomeMsg").innerHTML += "Phonegap is ready! version=";
        }

        $(function(){
            $('#savebutton').click(function(){
                //this is where the user manually keys in values, do error checking here
                window.localStorage.setItem("user_lat", $('#user_lat').val());
            });

            //called when the page is being shown
            $('#newpage').live('pageshow', function(){
                var userLat = window.localStorage.getItem("user_lat");
                if (userLat.length > 0){
                    $('#user_lat').val(userLat);
                }      

            });
        });


    </script>
</head>
<body>
    <div id="home" data-role="page">
        <div data-role="header">
            <h1>Home Page</h1>
        </div>
        <div data-role="content">
            Hola Phonegap & Jquery mobile!
            <a href="#newpage" data-role="button">Go to new page</a>
        </div>
        <div data-role="footer" data-position="fixed">
            <h4>Footer</h4>
        </div>
    </div>
    <!--2nd page-->
    <div id="newpage" data-role="page">
        <div data-role="header">
            <h1>Manually specify your GPS coordinates</h1>
        </div>
        <div data-role="content">
            <label for= "user_lat">Latitude:</label>
            <input type="text" name="user_lat" id="user_lat" value=""/>
            <a id ="savebutton" href="" data-role="button">Save</a>
        </div>
        <div data-role="footer" data-position="fixed">
            <h4>Footer</h4>
        </div>
    </div>

    <script type="text/javascript" src="phonegap.js"></script>
    <script type="text/javascript" src="js/jquery-1.10.1.js"></script>
    <script type="text/javascript" src="js/jquery.mobile-1.3.2.js"></script>        
</body>

回答1:

If '$' isn't defined I don't think that jQuery is being loaded correctly..

Try:

if ( $.mobile ) {
   // loaded
} else {
  // not loaded
}

to check if jQuery mobile is loaded, or try this for normal jQuery:

if (!jQuery) {
     alert("jQuery is not loaded");
}

回答2:

You need to include jQuery in your page in order to use $ (jQuery) which you did not. You can add the script tag and give the url of jquery in src attribute. Add this tag in head tag so that it is added before it is required.

<script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>

来源：https://stackoverflow.com/questions/18258303/referenceerror-cant-find-variable-jquerymobile-phonegap

标签

android

jquery

jquery-mobile

cordova