JQuery Mobile - добавление нового динамического контента - CSS не применяется

Question

Это то, что было задано раньше, но я все еще не могу заставить его работать. Я добавляю динамический контент на страницу (просмотр списка), а CSS теряется после добавления. Я прочитал триггер («create»), и даже после его добавления CSS не применяется.

$('#MyClubsListDiv').append('<ul id=\"MyClubsList\" data-role=\"listview\"></ul>').trigger("create"); 

for (var i=0; i<MyClubsReply.length; i++) 
{ 
    addClub('#MyClubsList',MyClubsReply[i].Name,MyClubsReply[i].LogoImg,MyClubsReply[i].LastUpdate); 
    $('#MyClubsListDiv').trigger("create"); 
} 


function addClub(section,clubName,logoFile,LastUpdate) 
{ 
    $(section).append('<li class=\"ClubListItem\">' + 
      '<a href=\"#ClubPage\" data-transition=\"slide\">' + 
       '<img src=\"' + PiccoloServer + 'ClubLogos/' + logoFile + '\" class=\"listview-logo-thumb\" />' + 
       '<div class=\"ClubListContent\">' + 
        '<h1 class=\"ClubListH1\">' + clubName + '</h1>' + 
        '<p >20 Offers Available</p> ' + 
       '</div>' + 
       '<p class=\"ui-li-count\">25d</p>' +      
      '</a>' + 
     '</li>').trigger("create"); 
} 

"MyClubsReply" - это объект JSON.

Что я делаю неправильно? (Или не делать?)

Answer 1

Я создал этот jsfiddle, чтобы вы его поняли.

Вы должны использовать триггер («создать») в здании списка просмотра UL, но каждый раз, когда вы добавляете новый элемент списка, вам нужно использовать listview («refresh»).

http://jsfiddle.net/eRsMV/

<div id="MyClubsListDiv"></div> 
<button id="addClubBtn">Add New Club</button> 

$('#MyClubsListDiv').append('<ul id=\"MyClubsList\" data-role=\"listview\"></ul>') 
    .trigger("create"); 

$("#addClubBtn").on("click", function() { 
    $("#MyClubsList").append(
     '<li class=\"ClubListItem\">' + 
     '<a href=\"#ClubPage\" data-transition=\"slide\">' + 
     '<img src=\"http://si0.twimg.com/profile_images/2366293550/Club_logo_normal.png\" class=\"listview-logo-thumb\" />' + 
     '<div class=\"ClubListContent\">' + 
     '<h1 class=\"ClubListH1\">Major Club</h1>' + 
     '<p>20 Offers Available</p>' + 
     '</div>' + 
     '<p class=\"ui-li-count\">25d</p>' + 
     '</a>' + 
     '</li>' 
    ).listview("refresh"); 
});