Динамически добавляявв мобильном jquery

Question

Я пытаюсь добавить элементы списка в неупорядоченные списки в jquery mobile, но форматирование создается неправильно.

<ul data-role="listview" data-theme="c" data-dividertheme="b">
                    <li data-role="list-divider">
                        Title Divider
                    </li>
                    <li>
                        <a href="test.html" data-transition="slide">List item 1</a>
                    </li>

 </ul>

Скрипт:

$('ul').append('<li><a>hello</a></li>');

По какой-то причине динамически генерируемый li не отображается так же, как статически созданный.Кто-нибудь знает почему и как я могу сделать это так же?

Answer 1

Попробуйте это:

$('ul').append($('<li/>', {    //here appending `<li>`
    'data-role': "list-divider"
}).append($('<a/>', {    //here appending `<a>` into `<li>`
    'href': 'test.html',
    'data-transition': 'slide',
    'text': 'hello'
})));

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

Answer 2

Ответы оказались немного грязными ...

$('ul').append('<li><a>hello</a></li>'); в порядке, но нужно обновить представление списка, поэтому все, что вам нужно:

$('ul').append('<li><a>hello</a></li>').listview('refresh');

Answer 3

И если вы хотите изменить атрибуты UL, вам может потребоваться вызвать .trigger ('create') для включающего div.это гарантирует, что UL будет создан снова со сбросом свойств.

Answer 4

Вам нужно будет добавить класс в тег списка

$('<ul>').append( $('<li>').attr('class','ui-li ui-li-static ui-btn-up-c ui-li-last').append('hello'))  ;

JQuery mobile автоматически добавляет класс к элементам списка, что можно увидеть, если вы запустите свою страницу в Firefox и отладите ее с помощью Firebug. Выберите класс, который был применен, и добавьте его в динамически сгенерированный тег li.

Answer 5

Ваш тег не ссылается на веб-страницу.

попробуйте:

$('ul').append('<li><a href="test2.html' data-transition="slide" />List Item 2</li>');