Question

当我通过jquery代码添加项目时，我遇到了jquery移动列表视图的问题。

如果我添加以下＆lt; ul＆gt;到页面，让＆＃34;正常＆＃34;页面处理发生，我的列表正确显示可扩展子列表等

<ul data-role="listview" id="Ul2" class="ui-listview-outer ui-listview ui-listview-inset ui-corner-all ui-shadow" data-inset="true">
<li data-role="collapsible" data-iconpos="right" data-shadow="false" data-corners="false" data-icon="plus">
    <h2 vid="CA175191-FA4D-4F2A-AAA7-2898971AB0F4">Parent 1</h2>
    <ul data-role="listview" data-shadow="false" data-inset="true" data-corners="false">
        <li data-role="collapsible" data-iconpos="right" data-shadow="false" data-corners="false">
            <h2 vid="65E74F52-54E6-4A84-B4AC-F24E638FE559">Sub 1</h2>
            <ul data-role="listview" data-shadow="false" data-inset="true" data-corners="false">
                <li><a href="#" vid="367806EA-493F-45BB-BAC9-DF11E946E21A">Child</a></li>
                <li><a href="#" vid="367806EA-493F-45BB-BAC9-DF11E946E21A">Child</a></li>
                <li><a href="#" vid="367806EA-493F-45BB-BAC9-DF11E946E21A">Child</a></li>
                <li><a href="#" vid="367806EA-493F-45BB-BAC9-DF11E946E21A">Child</a></li>
            </ul>
        </li>
        <li data-role="collapsible" data-iconpos="right" data-shadow="false" data-corners="false">
            <h2 vid="86628CD0-87BD-4649-8899-1029AD38DD9C">Sub 2</h2>
            <ul data-role="listview" data-shadow="false" data-inset="true" data-corners="false">
                <li><a href="#" vid="367806EA-493F-45BB-BAC9-DF11E946E21A">Child</a></li>
                <li><a href="#" vid="367806EA-493F-45BB-BAC9-DF11E946E21A">Child</a></li>
                <li><a href="#" vid="367806EA-493F-45BB-BAC9-DF11E946E21A">Child</a></li>
                <li><a href="#" vid="367806EA-493F-45BB-BAC9-DF11E946E21A">Child</a></li>
            </ul>
        </li>
        <li data-role="collapsible" data-iconpos="right" data-shadow="false" data-corners="false">
            <h2 vid="12C6A457-EEA1-47A0-A63D-3222DF3069F2">Sub 2</h2>
            <ul data-role="listview" data-shadow="false" data-inset="true" data-corners="false">
                <li><a href="#" vid="367806EA-493F-45BB-BAC9-DF11E946E21A">Child</a></li>
                <li><a href="#" vid="367806EA-493F-45BB-BAC9-DF11E946E21A">Child</a></li>
                <li><a href="#" vid="367806EA-493F-45BB-BAC9-DF11E946E21A">Child</a></li>
                <li><a href="#" vid="367806EA-493F-45BB-BAC9-DF11E946E21A">Child</a></li>
            </ul>
        </li>
    </ul>
</li>
<li data-iconpos="right" data-shadow="false" data-corners="false" data-icon="plus">
    <h2 vid="864FCB4E-98A1-4C0C-9421-E89F5C5423A6">Parent 2</h2>
</li>
</ul>

但是，如果我动态添加相同的代码

var myData = '<li>' + ........ + '</li>';
$('ul').append(myData);

然后运行

$('ul').listview("refresh")

列表的行为有所不同。

该列表在页面上的显示方式不同
点击＆＃34; Parent 1＆＃34;，而不是展开以显示＆＃34; Sub 1＆＃34;，它重定向页面以显示带有＆＃34; Sub 1＆＃34;的列表。作为列表的标题，以及4个空列表项。

我对接下来要尝试的内容感到困惑。我应该采取另一个步骤来刷新我的清单。或者我在元素中添加了一些不正确的类。

这是我试图在列表和子列表中显示的JSON，它有点减少所以可能有额外的方括号似乎没有必要 - 它以XML和在返回客户端之前从服务器端转换为JSON：

{
    "parents":
    {
        "parent":
        [{
            "parName": "Parent 1", "parID": "CA175191-FA4D-4F2A-AAA7-2898971AB0F4",
            "subs":
            {
                "sub":
                [{
                    "group_Name": "Sub 1", "group_ID": "65E74F52-54E6-4A84-B4AC-F24E638FE559",
                    "children":
                    {
                        "child":
                        [
                        { "vID": "367806EA-493F-45BB-BAC9-DF11E946E21A", "dispName": "Child 1" },
                        { "vID": "4DE698E0-E395-4FF9-9F74-E8679B992AED", "dispName": "Child 2" },
                        { "vID": "747EF952-C565-41C6-AF96-B7192AD3599A", "dispName": "Child 3" },
                        { "vID": "5BDD8BD5-27E3-4E71-9C02-7E41CADF327E", "dispName": "Child 4" }
                        ]
                    }
                }]
            }
        }]
    }
}

由于

Answer 1

事实证明，将我的JQM版本升级到1.4.5并在父div上使用.enhanceWithin()而不是使用.listview("refresh")解决了我的问题。

感谢@Omar指出我正确的方向。

JQuery Mobile - 如果动态添加内容，可在刷新后无法正常工作

1 个答案: