Question

在这里，我正在寻找一些奇怪的事情发生在我身上......我在html文件中直接创建了一个带有标题和一行随机信息的网格：

 <ul data-role="listview" data-inset="true">
            <li data-role="list-divider">
                <div class="ui-grid-d">
                    <div class="ui-block-a">Info1</div>
                    <div class="ui-block-b">Info2</div>
                    <div class="ui-block-c">Info3</div>
                    <div class="ui-block-d">Info4</div>
                    <div class="ui-block-e">Info5</div>
                </div>
            </li>

            <li> 
                <a href="#Select" class="ui-grid-d divider">
                    <div class="ui-block-a">
                        1
                    </div>
                    <div class="ui-block-b">
                        2
                    </div>
                    <div class="ui-block-c">
                        3
                    </div>
                    <div class="ui-block-d">
                        4
                    </div>
                    <div class="ui-block-e">
                        5
                    </div>
                </a>
            </li>
            <p class="inner"></p>
        </ul>

然后我使用＆＃34;内部＆＃34; class动态地有一个带有javascript函数的行，但它实际上显示...严重。这是js行和输出：

$('.inner').append('<li> <a href="#Select" class="ui-grid-d divider" id="nextgrid"><div class="ui-block-a">1</div><div class="ui-block-b">2</div><div class="ui-block-c">3</div><div class="ui-block-d">4</div><div class="ui-block-e">5</div></a></li>');

有谁知道为什么？它甚至发生在任何人身上吗？（我怀疑js函数没有考虑网格的某些属性，但我真的不确定。）

修改

@ Buzinas建议的新尝试：

有什么建议吗？

Answer 1

这是因为您要将li插入p，而li应该放入ul。

您应该获取p并使用ul插入动态数据，而不是使用append标记。

<强>更新

我已根据您想要的解决方案更新了your fiddle。

问题是每次添加/删除项目时都必须调用$('ul').listview('refresh');。

（jQuery mobile）动态网格显示效果不佳

1 个答案: