Question

我正在尝试使用下面的查询从数据库动态为我的phonegap应用创建带有DIV的页面。为了简单起见，数据库只有2列，“ID”和“数据”：

function querySuccessOrders(tx, results) {
console.log("Successful QUERY of the Table");
var len = results.rows.length;

for (var i=0; i<len; i++){ 
    $('#body').append('<div data-role="page" id="coi'+results.rows.item(i).ID+'" data-theme="b"></div>');
}

for (var i=0; i<len; i++){  
    $('#coi'+results.rows.item(i).ID+'').append('<div data-role="header" data-theme="b" id="coi_header'+results.rows.item(i).ID+'"></div>');
}

for (var i=0; i<len; i++){  
    $('#coi'+results.rows.item(i).ID+'').append('<div data-role="content" data-theme="b" id="infoGuts'+results.rows.item(i).ID+'"></div>');
}

for (var i=0; i<len; i++){  
    $('#coi'+results.rows.item(i).ID+'').append('<div data-role="footer" data-position="fixed" class="footer-docs" data-theme="b" id="coi_footer'+results.rows.item(i).ID+'"></div>');
}

for (var i=0; i<len; i++){  
    $('#coi_header'+results.rows.item(i).ID+'').append('<h1>ID #'+results.rows.item(i).ID+'</h1>');
    $('#coi_header'+results.rows.item(i).ID+'').append('<a href="#page" data-icon="home" data-iconpos="notext" id="intro" class="ui-btn-right"></a>');  
}

for (var i=0; i<len; i++){  
    $('#coi_header'+results.rows.item(i).ID+'').append('<div data-role="navbar" data-theme="b" id="coi_navbar'+results.rows.item(i).ID+'"></div>');
}

  for (var i=0; i<len; i++){  
    $('#coi_header'+results.rows.item(i).ID+'').append('<div data-role="navbar" data-theme="b" id="coi_navbar'+results.rows.item(i).ID+'"></div>');
}

for (var i=0; i<len; i++){  
    $('#coi_navbar'+results.rows.item(i).ID+'').append('<ul>');
    $('#coi_navbar'+results.rows.item(i).ID+'').append('<li><a href="#COI'+results.rows.item(i).ID+'">COI</a></li>');
    $('#coi_navbar'+results.rows.item(i).ID+'').append('<li><a href="#COP'+results.rows.item(i).ID+'">COP</a></li>');
    $('#coi_navbar'+results.rows.item(i).ID+'').append('<li><a href="#COQ'+results.rows.item(i).ID+'">COQ</a></li>');
    $('#coi_navbar'+results.rows.item(i).ID+'').append('</ul>');
}

for (var i=0; i<len; i++){  
    $('#coi_footer'+results.rows.item(i).ID+'').append('<p>footer</p>');     
}

for (var i=0; i<len; i++){
    $('#info'+results.rows.item(i).ID+'').append('ID:'+results.rows.item(i).ID+'<br />');
    $('#info'+results.rows.item(i).ID+'').append('Data:'+results.rows.item(i).Data+'<br />');
}

}

基本上我试图让身体看起来像动态：

    <body id="body">

<div data-role="page" id="coi1" data-theme="b">
    <div data-role="header" data-theme="b" id="coi_header1">
        <h1>ID #1</h1>
        <a href="#page" data-icon="home" data-iconpos="notext" id="intro" class="ui-btn-right"></a>
            <div data-role="navbar" data-theme="b" id="coi_navbar1">

                         <ul>
                           <li><a href="#COI1">COI</a></li>
                           <li><a href="#COP1">COP</a></li>
                           <li><a href="#COQ1">COQ</a></li>
                         </ul>
            </div>
    </div>
    <div data-role="content" data-theme="b" id="infoGuts1">
           ID:1<br />
           Data: asd <br />
    </div>
    <div data-role="footer" data-position="fixed" class="footer-docs" data-theme="b" id="coi_footer1">
     <p>footer</p>  
    </div>
</div>

<div data-role="page" id="coi2" data-theme="b">
    <div data-role="header" data-theme="b" id="coi_header2">
        <h1>ID #2</h1>
        <a href="#page" data-icon="home" data-iconpos="notext" id="intro" class="ui-btn-right"></a>
            <div data-role="navbar" data-theme="b" id="coi_navbar2">
                          <ul>
                           <li><a href="#COI2">COI</a></li>
                           <li><a href="#COP2">COP</a></li>
                           <li><a href="#COQ2">COQ</a></li>
                         </ul>              
            </div>
    </div>
    <div data-role="content" data-theme="b" id="infoGuts2">
            ID:2<br />
           Data: asd <br />
    </div>
    <div data-role="footer" data-position="fixed" class="footer-docs" data-theme="b" id="coi_footer2">
     <p>footer</p>  
    </div>
</div>

Doing this for each ID

</body>

以下是我遇到的问题，经过一段时间无法找到解决方案之后：

创建的Div在那里格式化（他们没有css）

新的div似乎被捣碎在一起（几乎就像我创造的不正确），就像div没有进入正确的位置，就像我在身体示例中所展示的那样。

感谢您的帮助。

Answer 1

jQuery Mobile文档在这种情况下非常糟糕。如果我理解正确，你想在完全动态生成的页面上刷新css。 jQM文档声明使用此语法 .trigger（'create'），但不幸的是它在jQM中不起作用。

在您的情况下，您应该使用以下语法：

$("#index").trigger("pagecreate");

以下是此解决方案的示例：http://jsfiddle.net/Gajotres/mpFJn/

使用JQuery动态创建DIV并在新DIV中添加DIV

1 个答案: