Добавление динамического содержимого в список разбивает JQuery Мобильный стили

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

Есть ли у вас какие-то намеки?

ТНХ

Answer 1

Элемент LI в коде ниже не имеет атрибута данных тему, а у вас есть во всех других LI

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

Пробовали ли вы что ?:

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