JQuery Mobile - 添加新的动态内容 - 未应用CSS

Question

这是之前被问过的问题，但我仍然无法使其工作。我将一个动态内容添加到一个页面（一个列表视图），并且在添加它后CSS将会丢失。我读了关于触发器（“创建”），甚至在添加它之后，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列表视图建筑物上使用触发器（“创建”），但每次添加新列表项时，都需要使用列表视图（“刷新”）。

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"); 
});