Question

我尝试使用ajax创建数据读取机制。但是当所有数据以<ul> <li>的形式显示时，都没有生成我想要的相应html标签。

我的代码：

(function( $, undefined ) {

     $(document).on("pagecreate", ".jqm-demos", function(){
         startApp();
     });

    function startApp(){
          $.ajax({
             type : 'GET',
             url : 'http://www.mydomain.com/app/bacaberita/utama.html',
             async: true,
             dataType : 'json',
             success : function(result){
                 allData = result.items;
                   $.each(allData, function(i, data) {
                   $('#listdata').append(
                     '<li>' +
                         '<a href="#">' +
                            '<img src="'+ data.Img +'">' +
                            '<h2>'+ data.Title +'</h2>' +
                            '<p>'+ data.Post +'</p>' +
                         '</a>' +
                     '</li>'
              );
           });
    },
    error: function(jqXHR, exception) {
         alert('Error connection');       
    }
  });   
}

})(jQuery);

我的HTML代码：

<ul data-role="listview" data-inset="true" id="listdata">
    <li>

    </li>
</ul>

数据应该生成如下形状：http://pastebin.com/VLevgVfx

但我从ajax流程得到的是：http://pastebin.com/Rp0DSCYA

结果，导致不规则的显示。

不会自动添加HTML class="ui-li-has-thumb ui-first-child"和class="ui-btn ui-btn-icon-right ui-icon-carat-r"

如何解决此问题???

由于

Answer 1

在成功功能结束时添加：

$("#listdata").listview("refresh");

当你以dimamically方式添加元素时，你需要让jQM刷新元素来解析并添加样式。

jQuery Mobile使用$ .each将数据附加到listview

1 个答案: