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