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

JQuery Mobile - Appending new dynamic content - CSS not applied

本文关键字：应用 CSS 动态 Mobile- JQuery      更新时间：2023-09-26

这是以前问过的问题，但我仍然无法让它发挥作用。我正在向页面（列表视图）添加动态内容，添加后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对象。

我做错了什么？（或者不做？）

我创建了这个jsfiddle让你理解它。

您必须在UL Listview建筑上使用触发器（"创建"），但每次添加新的列表项时，您都需要使用Listview（"刷新"）。

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");
});
相关文章：