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>

在web控制台中，很明显第一个条目的html代码和按钮添加的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

向Panel添加新内容后，请使用

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

<强> Demo

备注：

使用.listview("refresh")和.listview().listview("refresh")不会正确地增强列表视图，因为它会将其与父div合并，而不是将其渲染为div附加到其中的子项。< / p>
当您显示/隐藏元素以更新页面大小时，将使用

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

它有效，但它是＆＃34;错误的方式＆＃34;我想。

向动态添加内容到Panel

3 个答案: