jQuery Mobile使用$ .each将数据附加到列表视图

Question

I tried to make a data reading mechanism using ajax. But when all the data is displayed in the form of <ul> <li> did not generate the appropriate html tag I want.

My code :

(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);

My html code :

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

    </li>
</ul>

The data is supposed to generate shaped like this : http://pastebin.com/VLevgVfx

But what I get from the ajax process is : http://pastebin.com/Rp0DSCYA

As a result, the resulting irregular display.

No HTML is automatically added class="ui-li-has-thumb ui-first-child" and class="ui-btn ui-btn-icon-right ui-icon-carat-r"

How do I resolve this problem???

Thanks

Answer 1

Add this at the end of the success function:

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

As you are adding elements dimamically, you need to ask jQM to refresh the element to parse and add the styles.