1

我只是在测试 PhoneGap 快速入门之一的修改版本。我还引用了 JQuery。但是，当我想使用 Jquery 更改 div 的内容时，出现错误，但简单的警报就可以正常工作。

function querySuccess(tx, results) {
    var s = "";
    for (var i=0; i<len; i++){
        s += "Row = " + i + " ID = " + results.rows.item(i).id + " Data =  " + results.rows.item(i).data + "<br />"; 
    }

    //This cause an error
    //$("#cnt").html(s);

    //This works fine
    alert(s);
}

你能告诉我我错过了什么吗？完整代码如下。

<!DOCTYPE html>
<html>
  <head>
  <title></title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
    <meta charset="utf-8">

        <!-- If your application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here -->
        <script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>        

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

        <script type="text/javascript" charset="utf-8">

            // Wait for PhoneGap to load
            //
            document.addEventListener("deviceready", onDeviceReady, false);

            // Populate the database 
            //
            function populateDB(tx) {
                tx.executeSql('DROP TABLE IF EXISTS DEMO');
                tx.executeSql('CREATE TABLE IF NOT EXISTS DEMO (id unique, data)');
                tx.executeSql('INSERT INTO DEMO (id, data) VALUES (1, "First row")');
                tx.executeSql('INSERT INTO DEMO (id, data) VALUES (2, "Second row")');
            }

            // Query the database
            //
            function queryDB(tx) {
                tx.executeSql('SELECT * FROM DEMO', [], querySuccess, errorCB);
            }

            // Query the success callback
            //
            function querySuccess(tx, results) {
                var len = results.rows.length;
                console.log("DEMO table: " + len + " rows found.");
                var s = "";
                for (var i=0; i<len; i++){
                    console.log("Row = " + i + " ID = " + results.rows.item(i).id + " Data =  " + results.rows.item(i).data);
                    s += "Row = " + i + " ID = " + results.rows.item(i).id + " Data =  " + results.rows.item(i).data + "<br />"; 
                }

                $("#cnt").html(s);
                //alert(s);
            }

            // Transaction error callback
            //
            function errorCB(err) {
                console.log("Error processing SQL: "+err.code);
            }

            // Transaction success callback
            //
            function successCB() {
                var db = window.openDatabase("Database", "1.0", "PhoneGap Demo", 200000);
                db.transaction(queryDB, errorCB);
            }

            // PhoneGap is ready
            //
            function onDeviceReady() {
                var db = window.openDatabase("Database", "1.0", "PhoneGap Demo", 200000);
                db.transaction(populateDB, errorCB, successCB);
            }
            </script>
  </head>
  <body onload="onBodyLoad()">
      <h1>Example</h1>
      <p>Open Database</p>
      <div id="cnt">this</div>
  </body>
</html>
4

2 回答 2

1

该代码在设备和浏览器中都可以正常工作

http://jsfiddle.net/dhavaln/ujKuF/

正如您提到的 jquery 和 jquery mobile 的 CDN url，只需确保正确加载这些库，因为这是您使用 jquery 的唯一代码。

$("#cnt").html(s);
于 2012-07-07T10:50:56.760 回答
0

在 for 循环中粘贴此代码。

$("#cnt").append(s);

于 2013-03-04T13:08:06.673 回答