将内容动态添加到面板

Question

可能是我的javascript能力不够:)。

我正在尝试将列表（通过 javascript 添加项目）动态增强到 jquery 移动面板。下面的代码是该功能的工作（非工作）示例。完整的项目会有点过多的开销（并且您需要一些串行连接的设备来运行它）。

它很好地向列表中添加了一个条目，但没有以正确的样式呈现它。

有没有我遗漏的技巧？

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title> Device control</title>

    <link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css" />
    <style>
    </style>

    <script src="js/jquery-1.7.2.min.js"></script>
    <script src="js/jquery.mobile-1.3.1.min.js"></script>
    <script>

        function addEntry()
        {
            var div = $("<li><a href=\"#\">Device 2</a></li>").appendTo("#list_devices");

            $( "#nav-panel-devicecommands" ).trigger( "updatelayout" );
        }

    </script>

    </head>
<body>
    <!-- Home -->
    <div data-role="page" id="pageDeviceCommands"  class="ui-responsive-panel">
        <div data-theme="a" data-role="header" data-position="fixed">
            <h3>Overview</h3>
            <a href="#nav-panel-devicecommands" data-icon="bars" data-iconpos="notext">Menu</a>
        </div>
        <div data-role="content" id="contentDeviceCommands">
            empty for now
        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">
            <div data-role="navbar" data-iconpos="top">
                <ul>
                    <li><a href="#pageDeviceCommands" data-transition="fade" data-theme="" data-icon="home"></a></li>
                </ul>
            </div>
        </div>

        <style>
            .nav-search .ui-btn-up-a {
                background-image:none;
                background-color:#333333;
            }
            .nav-search .ui-btn-inner {
                border-top: 1px solid #888;
                border-color: rgba(255, 255, 255, .1);
            }
        </style>
        <div data-role="panel" data-position="left" data-position-fixed="false" data-display="reveal"
             id="nav-panel-devicecommands" data-theme="a">
            <ul id="list_devices"  data-role="listview" data-theme="a" data-divider-theme="a" style="margin-top:-16px;"
                class="nav-search">
                <li data-icon="delete" style="background-color:#111;">
                    <a href="#" data-rel="close">Close device selection</a>
                </li>
                <li>
                    <a href="#">Device 1</a>
                </li>
            </ul>

            <a data-role="button" onclick="addEntry();">add device</a>
            <!-- panel content goes here -->
        </div>
        <!-- /panel -->
    </div>
</body>
</html>

在webconsole中，很明显第一个入口的html代码，和那个按钮添加的不一样。有没有办法让 jquery mobile 将相同的信息集应用于新添加的 li 项目（除了“手动”添加）？

<ul id="list_devices" data-role="listview" data-theme="a" data-divider-theme="a" style="margin-top:-16px;" class="nav-search ui-listview">
                <li data-icon="delete" style="background-color:#111;" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-iconpos="right" data-theme="a" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-first-child ui-btn-up-a"><div class="ui-btn-inner ui-li"><div class="ui-btn-text">
                    <a href="#" data-rel="close" class="ui-link-inherit">Close device selection</a>
                </div><span class="ui-icon ui-icon-delete ui-icon-shadow">&nbsp;</span></div></li>
                <li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="a" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-last-child ui-btn-up-a"><div class="ui-btn-inner ui-li"><div class="ui-btn-text">
                    <a href="#" class="ui-link-inherit">Device 1</a>
                </div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div></li>
            <li><a href="#">Device 2</a></li><li><a href="#">Device 2</a></li></ul>

非常感谢任何帮助或提示。

最好的问候， 爱德华

Answer 1

添加内容后调用方法

$( "#list_devices" ).listview("refresh")

这将为您添加到列表视图的动态内容设置样式。

Answer 2

将新内容添加到面板后，使用

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

Demo

注意事项：

• 使用 .listview("refresh") 和 .listview().listview("refresh") 不会正确增强列表视图，因为它会将其与其父 div 合并，而不是将其渲染为附加它的 div 的子视图。

• updatelayout 用于显示/隐藏元素以更新页面大小。

• 将 jQuery 1.9.1 与 jQuery Mobile 1.3.1 结合使用

• 相关：How do you dynamically add side panel menu items with jQuery Mobile and keep all CSS styling?

Answer 3

我为 jqm 1.4.2 找到的唯一解决方案是：

    $(document).trigger('create');

它有效，但我想这是“错误的方式”。