Добавление динамического содержимого в разрывы списка стилей 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>");