Question

使用我的第一个Cordova应用程序。当我单击一个应该填充跨度的按钮时，我会看到值填充在范围中，但随后闪烁并且跨度为空。当我再次单击该按钮时，没有任何反应。如果我单击主页按钮，我可以单击按钮并查看值，但它们会再次消失。我无法弄清楚他们为什么会被删除。我正在使用.Net IDE开发和Ripple Nexus进行测试。 Chrome开发工具中没有错误。

(function () {
    "use strict";

    document.addEventListener( 'deviceready', onDeviceReady.bind( this ), false );

    function getPosition() {

        var options = {
            enableHighAccuracy: true,
            maximumAge: 3600000
        }

        var watchID = navigator.geolocation.getCurrentPosition(onSuccess, onError, options);
        
        function onSuccess(position) {            
            $('#latitude').text(position.coords.latitude);            
            $('#longitude').text(position.coords.longitude);
            $('#altitude').text(position.coords.altitude);
            $('#accuracy').text(position.coords.accuracy);
            $('#altitudeAccuracy').text(position.coords.altitudeAccuracy);
            $('#heading').text(position.coords.heading);
            $('#speed').text(position.coords.speed);
            $('#timestamp').text(position.timestamp);   
        };

        function onError(error) {
            alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n');
        }
    }

    function watchPosition() {
        
        var options = {
            maximumAge: 3600000,
            timeout: 3000,
            enableHighAccuracy: true,
        }

        var watchID = navigator.geolocation.watchPosition(onSuccess, onError, options);

        function onSuccess(position) {            
            $('#Latitude').text(position.coords.latitude);
            $('#longitude').text(position.coords.longitude);
            $('#altitude').text(position.coords.altitude);
            $('#accuracy').text(position.coords.accuracy);
            $('#altitudeAccuracy').text(position.coords.altitudeAccuracy);
            $('#heading').text(position.coords.heading);
            $('#speed').text(position.coords.speed);
            $('#timestamp').text(position.timestamp);            
        };

        function onError(error) {
            alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n');
        }
    }

    function onDeviceReady() {
        document.getElementById("getPosition").addEventListener("click", getPosition);
        document.getElementById("watchPosition").addEventListener("click", watchPosition);
    };
} )();

form {
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
}

#title {
    font-size: 16px;
}

#summary {
    font-size: 35px;
}

#summary img {
    float: right;
}

#error-msg {
    text-align: center;
    margin-top:  50%;
    font-weight: bold;    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
    <head> 
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">

        <link href="css/jquery.mobile-1.4.5.min.css" rel="stylesheet" />
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <title>GPS</title>
    </head>
    <body>
 
        <div data-role="page" id="weather-page">

            <div data-role="header" class="header">
                <h1 id="app-title">My Cool GPS</h1>
                <a href="/" class="ui-btn ui-btn-left ui-btn-corner-all ui-icon-home ui-btn-icon-notext" rel="external">Home</a>
            </div>

            <div role="main" class="ui-content">
                <form>                    
                    <button id="getPosition">CURRENT POSITION</button>
                    <button id="watchPosition">WATCH POSITION</button>
                </form>

                <ul id="gps-location" data-role="listview" data-insert="true" class="ui-listview ui-listview-insert ui-corder-all ui-shadow not ">               
                    <li>latitude: <span id="latitude"></span></li>
                    <li>longitude: <span id="longitude"></span></li>
                    <li>altitude: <span id="altitude"></span></li>
                    <li>accuracy: <span id="accuracy"></span></li>                    
                    <li>heading: <span id="heading"></span></li>
                    <li>speed: <span id="speed"></span></li>
                    <li>timestamp: <span id="timestamp"></span></li>
                    <!--<li>altitudeAccuracy: <span id="altitudeAccuracy"></span></li>-->
                </ul>
            </div>

            <footer data-role="footer" data-position="fixed">
                <h4>My Cool GPS</h4>
            </footer>

        </div>

        <script src="scripts/jquery-2.1.0.min.js"></script>
        <script src="scripts/jquery.mobile-1.4.5.min.js"></script>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="scripts/platformOverrides.js"></script>
        <script type="text/javascript" src="scripts/index.js"></script>        
    </body>
</html>

Answer 1

检查代码中的提醒，可能会导致您引用的问题。其次，表单标签中的按钮将在没有preventDefault（）语句的情况下单击时尝试提交该表单。因为看起来你并没有将表单用于任何事情，所以你可以放弃这个html元素。

Cordova应用程序不会在span标记中保留数据

1 个答案: