0

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

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 没有像我在 body 示例中布置的那样进入正确的位置。

谢谢你的帮助。

4

1 回答 1

1

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

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

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

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

于 2013-01-12T22:25:13.497 回答