Hinzufügen von dynamischen Inhalten Liste bricht JQuery Mobile-Stile

Question

Ich versuche, Inhalte dynamisch in die Liste hinzuzufügen:

<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> 

by doing:

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

aber dann bricht es die Stile. Ecken sind nicht mehr gerundet und auf mobilen Browser-Seite sieht aus wie verkürzt:

http://imgur.com/a/qyljX

Haben Sie irgendwelche Hinweise haben?

thx

Answer 1

Das LI-Element in dem folgenden Code nicht daten Thema Attribut hat, stattdessen haben Sie es in allen anderen LI

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

Haben Sie versucht, dass ?:

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