Question

我正在尝试从我站点内第二页上的MYSQL数据库中检索的数据创建一个动态列表，由于某种原因，我生成并放入HTML“li”的所有数据都没有占用在任何jquery移动效果。我正在使用新的beta 1版本。谢谢你的帮助！

这是我的代码：

//move to second page from intial post
var newpage = function(){

    $.mobile.changePage('#page2');  

}


$("#page2").live("pagebeforeshow",function(){

//dynamically creating the div tag to hold all <li> elements
    $('<div id = "listHolder"></div>').appendTo("#here");

    var restaurant = JSON.parse(localStorage.getItem('restaurant'));
    var dataString2 = 'restaurant=' + restaurant;                                               

    //php call to get data from the database
    $.post("getResults.php", dataString2, callback);                                                            


});

//remove the div tag when the page disappears
$("#page2").live("pagehide", function(event, ui) {
        $("#listHolder").remove();
    });


//function to call from the php request
var callback = function(json){

    var dataList = JSON.parse(json);

    var list = "";

    //building the list
    for (x = 0; x < dataList.length; x++){
        list += "<li>" + dataList[x].PartySize + "<span class='ui-li-aside'>" + dataList[x].Quote + "</span></li>";
    }


    document.getElementById('listHolder').innerHTML = list;
    document.getElementById('restaurant').innerHTML = dataList[0].Restaurant;
}                   



<div data-role="page" data-theme="a" id="page2">

    <div data-role="header" data-theme="b">
        <center><h2><div id="restaurant"></div></h2></center>

    </div>
    <div data-role='content'>

        <ul data-role='listview' id = "here" data-inset='true' data-theme='c'><li data-role='list-divider'>Party<span class='ui-li-aside'>Mintues til Sat</span></li>


        </ul>

    </div>


</div>

Answer 1

在插入新的li标签后，尝试在ul元素上调用.listview（）。

$('#here').listview(); //at the end of your append'ing

你也可以将每个li标签.append（）放到ul而不是动态添加中间div标签吗？

Answer 2

$('#here').listview('refresh');

Answer 3

尝试添加.page()

也许在这里：

document.getElementById('restaurant').innerHTML = dataList[0].Restaurant;
$("#page2").page();

Answer 4

在我看来，您将<div>的内部html设置为一堆<li>元素，这可能会导致一些问题！他们需要在<ul>或<ol>内。你不应该<div>内有<ul>！

如果你想替换li中的所有内容，我会取出

$('<div id = "listHolder"></div>').appendTo("#here");

并将document.getElementById('listHolder').innerHTML = list;更改为document.getElementById('here').innerHtml(list);

如果您只想将list中的html添加到列表底部，请执行以下操作：

`$('#here').append($(list));`

而不是

document.getElementById('listHolder').innerHTML = list;

Jquery Mobile列表没有格式

4 个答案: