将动态内容添加到列表中断JQuery Mobile样式

Question

我正在尝试动态添加内容到列表中：

<div data-role="content">
            <ul data-role="listview" data-divider-theme="b" data-inset="true" id="two">
                <li data-role="list-divider" role="heading">
                    Divider
                </li>
                <li data-theme="c">
                    <a href="#page4" data-transition="slide">
                        Element1
                    </a>
                </li>
                <li data-theme="c">
                    <a href="javascript:changePage('1');" data-transition="slide">
                        Element2
                    </a>
                </li>
                <li data-theme="c">
                    <a href="#page1" data-transition="slide">
                        Element3
                    </a>
                </li>
            </ul>
        </div>

做：

$("#two").append("<li><a href='#page4'>xxx</a></li>");
$("#two").listview('refresh');

然后它打破了风格。角落不再是四舍五入的，并且在移动浏览器页面上看起来像缩短了：

http://imgur.com/a/qyljX

你有任何提示吗？

THX

Answer 1

下面代码中的LI元素没有data-theme属性，而是在所有其他LI

中

$("#two").append("<li><a href='#page4'>xxx</a></li>");

你试过吗？：

$("#two").append("<li data-theme='c'><a href='#page4'>xxx</a></li>");