2

我从我的代码中提取了非常小的片段来展示我的问题的一个非常简单的例子。我把它放在 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 -->

除了由这个javascript填充的skillsDiv之外，一切看起来都很好：

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 填充的数组，所以我认为这是最简单的重新创建它的方法。）

4

2 回答 2

3

编辑：在你的函数末尾添加这个

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

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

演示

于 2013-05-07T22:38:44.623 回答
0

利用：

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

用于样式的标准 CSS。

于 2015-10-17T02:14:14.530 回答