Как динамически добавлять <li>элементов, используя jQuery (mobile) в качестве списка

Question

Я пытаюсь заставить jQuery (мобильный) добавлять новые <li> элементы в <ul>, для которого установлена ​​роль данных "listview"

Вот 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>

А вот используемый javascript:

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

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

Но проблема в том, что вывод отображается как: http://www.dumblegroup.com/Capture.png

Я бы хотел, чтобы элемент "sada" отображался только один раз, и он должен иметь такое же форматирование, как и "Page1".

Что я делаю не так? Благодарю за любую помощь!

/ Magnus

Answer 1

У меня была очень похожая проблема, когда я впервые попробовал использовать jquery mobile, используя XHR для получения некоторых данных.Listview кажется очень привередливым, и я нашел самый простой способ заставить его работать - создать UL в моем коде (не на странице HTML), и после добавления моего LI я вызвал listview () во вновь созданном UL.

Поэтому попробуйте объявить свой UL (в html) БЕЗ атрибута data-role , используйте js для добавления элементов LI и затем вызов списка() на UL.

например.

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

Answer 2

Я сделал это:

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

и работает правильно

Answer 3

Я не очень много работал с jQuery mobile, но я предполагаю, что атрибут data-transition является существенным.Попробуйте установить его в добавляемой ссылке.