如何使用jQuery Mobile动态添加侧面板菜单项并保持所有CSS样式？

Question

我从代码中提取了非常小的片段，以显示我的问题的非常简单的示例。 我把它放在JSFiddle-> http://jsfiddle.net/hollycoffee/LjLMU/

我研究并发现了其他具有相同问题的人，他们尝试了addClass或刷新 jQuery方法，因此我在代码中的几个不同地方都尝试了，但没有任何效果，因此我希望通过在JSFiddle中编写简单的示例，有人可以指出我到底在想什么，在哪里。

这个例子是随机的，没有任何意义，但是我坚持的部分是，只有菜单的动态部分失去了样式，即“技能”列表。

菜单部分标记如下所示：

<header data-role="header" data-position="absolute" data-theme="a">
    <h1>View Skills</h1>
    <a href="#left-panel" data-icon="bars" data-iconpos="notext" data-shadow="false" data-iconshadow="false">Menu</a>
</header>

<!-- Starting our left side menu panel -->
<div data-role="panel" id="left-panel" data-theme="a">
    <ul data-role="listview" data-theme="a">
        <li data-icon="back"><a href="#" data-rel="close">Back Home</a></li>
    </ul><br />

    <div class="ui-header ui-bar-a" data-theme="a">Settings</div>
    <div data-role="collapsible" data-inset="false" data-iconpos="right" data-theme="a" data-content-theme="a">
        <h3>Optimization Settings</h3>
        <div data-role="collapsible-set" data-inset="false" data-iconpos="right" data-theme="a" data-content-theme="a">
            <ul data-role="listview">
                <li><a href="#" data-rel="close">Colors</a></li>
                <li><a href="#" data-rel="close">Preferences</a></li>
            </ul>
        </div><!-- /collapsible-set -->
    </div><!-- /collapsible -->

    <div class="ui-header ui-bar-a" data-theme="a">Skills Menu</div>
    <div id="skillsList"></div>

    <div class="ui-header ui-bar-a" data-theme="a">Saved</div>    
    <div data-role="collapsible" data-inset="false" data-iconpos="right" data-theme="a" data-content-theme="a">
        <h3>Saved Searches</h3>
        <div data-role="collapsible-set" data-inset="false" data-iconpos="right" data-theme="a" data-content-theme="a">
            <ul data-role="listview">
                <li><a href="#" data-rel="close">Angry Birds</a></li>
                <li><a href="#" data-rel="close">Professional Events</a></li>
            </ul>
        </div><!-- /collapsible-set -->
    </div><!-- /collapsible -->
</div><!-- / Menu panel -->

除了SkillsDiv以外，其他所有内容看起来都很不错，此javascript可以填补该技能：

function CreateSkillsList(skills){
    var skillsDiv = $('#skillsList');
    var html = "<div data-content-theme=\"a\" data-theme=\"a\" data-iconpos=\"right\"    data-inset=\"false\" data-role=\"collapsible\"><h3>Skills</h3><div data-role=\"collapsible-set\" data-inset=\"false\" data-iconpos=\"right\" data-theme=\"a\" data-content-theme=\"a\">";
    html += "<ul data-role='listview'>";

    var size = skills.length;
    for (i=0; i<size; i++) {
        html += "<li><a href=\"#\" data-rel=\"close\"><div id='Skill" + i + "'></div>   </a></li>";
    }

    html += "</ul></div></div>";
    skillsDiv.html(html);     
}

每个技能的确显示为列表项，但没有CSS。

这是JSFiddle，因此您可以使用左上方的菜单按钮查看没有样式的技能列表：

http://jsfiddle.net/hollycoffee/LjLMU/

非常感谢您的帮助，您StackOverflow的天才们每次都会为我提供帮助！ -冬青

（快速注释更新-在我的真实应用程序中，我不使用$(document).ready() -我只是将其放入本示例中，以为我填充数组。我的真实应用程序使用外部API填充了数组，所以我认为这是重新创建它的最简单方法。）

Answer 1

编辑：在函数末尾添加

$('[data-role=page]').trigger('pagecreate');

---

只需添加 $('[data-role=panel]').trigger('updatelayout'); 将项目动态注入面板后。

演示

Answer 2

采用：

$('#panel-id').html(yourHtmlHere);
$('#panel-id').trigger('create');
$('#panel-id').trigger('updatelayout');

样式的标准CSS。