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

我从我的代码中提取了非常小的片段来展示我的问题的一个非常简单的示例。我把它放在JSFIDLE->

我已经研究并发现了其他有同样问题的人，他们或者尝试了addClass或者refresh jQuery方法，所以我在代码中的几个不同的地方尝试了这两种方法，但都没有效果，所以我希望通过在JSFIDLE中制作一个简单的示例，有人可以准确地指出我缺少了什么以及在哪里

这个例子是随机的，没有意义，但我一直坚持的是，只有菜单的动态部分失去了风格，技能列表

菜单部分标记如下所示：

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

函数CreateSkillsList（技能）{
var skillsDiv=$（“#skillsList”）；
var html=“技能”；
html+=“
”；
var size=skills.length；
对于（i=0；i
编辑：将其添加到函数末尾


只需添加
$（'[data role=panel]'）。在将项目动态注入面板后触发（'updatelayout'）；


使用：

用于样式设置的标准CSS。
我尝试了你的演示，但它不起作用，它给了我一个类似以下的错误：未捕获的异常：Actionscript中的错误。使用try/catch块查找错误。[在此错误上中断]…e{K=x.u.path}var a=M.path；if（K！=a）{if（/\/.test x.o））{返回false}var L=K.split…你的演示使用的是什么浏览器？我正在使用Firefox。我在Safari的iPhone上试用了它，但技能根本不包含在你的演示链接中。我不确定出了什么问题。谢谢你尝试帮助我，Omar。我真的很感激！-HollyI认为它只是缺少顶部，因为你删除了.ready行和左尾随}）；最后…但当我删除它时，它仍然不起作用。我仍然感到困惑。在我的实际应用程序中，我没有使用.ready。我只是将它放在这个示例中来填充我的数组。我的实际应用程序通过外部API填充数组，所以这是重新创建它的最简单方法…现在我的实际项目菜单正在工作！我爱你，Omar！！！！我将永远感激。：我已经更新了我的答案和演示。
$('[data-role=page]').trigger('pagecreate');

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