How to add <li> elements dynamically using jQuery (mobile) as listview

I'm trying to get jQuery (mobile) to add new <li> elements to a <ul> which has data-role set to "listview"

Here's the html:

    <开发者_开发知识库div data-role="page">

   <header data-role="header">  
    <h1>Header</h1>
   </header>  

   <div data-role="content">  
    <ul data-role="listview" data-theme="a" id="sitelist">
        <li><a href="page1.html" data-transition="pop">Page1</a></li>
    </ul>
   </div>  

   <footer data-role="footer">  
    <h4>Footer text</h4>
   </footer>  

</div>

And here's the javascript used:

$('ul').append('<li><a href="#">sada</a></li> ');

$('ul').listview('refresh');

But the problem is that the output gets rendered as: http://www.dumblegroup.com/Capture.png

I'd like the "sada" item to be rendered only once and it should have the same formatting as "Page1".

What am I doing wrong? Thankful for any help!

/Magnus

I haven't done much work with jQuery mobile, but I assume that the data-transition attribute is essential. Try setting it in the link you're adding.

I've had a very similiar issue when I first tried using jquery mobile using XHR to fetch some data. Listview seem very finicky and the easiest way I found to get it to work was to create the UL in my code (not in the HTML page) and after appending my LI's, I called listview() on the newly created UL.

So basically try declaring your UL (in the html) WITHOUT the data-role attribute, use js to add your LI elements and then call listview() on the UL.

eg.

$('#sitelist').append(data);
...
$('#sitelist').listview()

I'have done this:

var myList = $("#theList");
myList.listview('refresh');

and works correctly