Question

我正在测试一个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>

Answer 1

代码在设备和浏览器中都能正常工作

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

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

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

Answer 2

在for循环中粘贴此代码。

$（ “＃CNT”）附加（多个）;

将Jquery与PhoneGap结合使用

2 个答案: