JQM:动态列表没有显示JAM样式,尝试了几个修复无济于事

时间:2013-06-10 04:02:31

标签: jquery mobile jquery-mobile

我已经尝试了大量的解决方案并处于拔毛阶段,如果有人能帮助它将会深深感激... TIA。 :)

我正在尝试使用适当的样式在我的HTML中显示JSON数组的内容。这是我正在加载的JSON数组: http://highendwholesale.com/json.php

以下是我在使用下面的代码时得到的结果,因为你可以看到它加载正常但没有造型 - 如果有人能帮助我完成这项工作,我将不胜感激: http://highendwholesale.com/test.php

<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $.ajaxSetup({ cache: false });
    $.getJSON("json.php", function(data){
        $('ul#myInventory').empty();

        $.each(data, function(index, d){           
            $('ul#myInventory').append("<li><a href='#'><img src='http://highendwholesale.com/listings/"+d.CID+"/thumb/1.jpg' height='80' width='80' alt='"+d.CID+"' /><h2>"+d.title+"</h2><p>"+d.blurb+"</p></a></li>");
        });         
        $('ul#myInventory').trigger("create");          
    }).error(function(jqXHR, textStatus, errorThrown){
        alert("error occurred!");
    });
    $('ul#myInventory').listview('refresh');         
});
</script>
</head>
<body>
<div data-role="page" id="index" data-theme="d">

    <div data-role="header">
        <h1>Inventory</h1>
    </div><!-- /header -->

<div data-role="content">   
    <div id="inventory">
        <ul data-role='listview' id='myInventory' data-inset='true' class='ui-listview ui-listview-inset ui-corner-all ui-shadow'></ul>
    </div>
</div><!-- /content -->

</div>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

首先在你的html中准备ul。然后将li附加到此ul。 在ajax调用listview后添加此内容。更新HTML

$('ul#yourList').trigger("create");

UPDATE JQUERY

<div data-role="content">   
    <div id="inventory">
        <ul data-role='listview' id='myInventory' data-inset='true' class='ui-listview ui-listview-inset ui-corner-all ui-shadow'></ul>
    </div>
</div><!-- /content -->