How to add dynamic <li> elements using jQuery (mobile) as a list

Question

I'm trying to get jQuery (mobile) to add new items <li>to <ul>one that has the 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 javascript is used:

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

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

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

I would like the sada element to be displayed only once, and it should have the same formatting as "Page1".

What am I doing wrong? Thanks for any help!

/ Magnus

Answer 1

jQuery, , . .

Answer 2

, jquery mobile, XHR, . Listview , - UL ( HTML), LI listview() UL.

, UL ( html) data-role, js LI, listview() UL.

.

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

Answer 3

I have done this:

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

and it works correctly