Динамическое добавление ‹li/› к ‹ul/› в jquery mobile

Я пытаюсь добавить элементы списка в неупорядоченные списки в 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 не отображается так же, как статически созданный. Кто-нибудь знает, почему и как я могу сделать то же самое?


html jquery jquery-mobile
person locoboy    schedule 08.05.2011    source источник

Ответы (5)


arrow_upward
87
arrow_downward

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

$('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');
person thecodeparadox    schedule 08.05.2011
comment
@ cfarm54 Пожалуйста, проверьте это, я думаю, это может сработать. Если нет, прокомментируйте меня. - person thecodeparadox; 08.05.2011
comment
нет не работает. я не думаю, что вы можете просто добавить его в структуру jquery-mobile. вы пробовали использовать библиотеки? jquerymobile.com - person locoboy; 08.05.2011
comment
@ cfarm54 после добавления <li> вам нужно вызвать $('ul').listview('refresh') для обновления. Попробуйте это, если нет, пожалуйста, прокомментируйте меня. - person thecodeparadox; 09.05.2011
comment
Этот код медленный, сложный И ответ не содержит решения, а есть комментарий. - person naugtur; 09.05.2011
comment
@naugtur Привет, друг, проявляя должное уважение к твоему комментарию, я хочу прокомментировать тебя, что я сначала даю решение, и оно проснулось для cfarm54, хотя оно завершается комментарием. так почему вы голосуете за меня? - person thecodeparadox; 09.05.2011
comment
Просто чтобы заставить вас обновить ответ. Понижение отменено. :) Все остальное верно - то, как вы создаете элементы, нечитаемо для новичков и медленнее, чем нажатие строки html. Ваш способ добавления элементов полезен, когда к элементам применяются более сложные методы, такие как привязка событий. - person naugtur; 09.05.2011
comment
@naugtur спасибо за ваш конструктивный комментарий. Как новый пользователь, я могу быть виноват, и такие советы и комментарии ценны для меня. Еще раз спасибо. - person thecodeparadox; 09.05.2011
comment
@abdullah.abcoder Я рад, что ты так на это смотришь. +1 за отношение! Удачи. - person naugtur; 09.05.2011
comment
Это правильный ответ, несмотря ни на что, я борюсь с этой проблемой вечно и всегда.... - person Friis1978; 31.05.2015

arrow_upward
45
arrow_downward

Предоставленные ответы оказались немного запутанными...

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

$('ul').append('<li><a>hello</a></li>').listview('refresh');
person naugtur    schedule 09.05.2011
comment
Как я ответил на свой вопрос, если ОП @cfarm54, а я @naugtur? - person naugtur; 10.05.2011
comment
@EJP - даже если он ответил на свой вопрос, это поощряется при обмене стеками, и его не следует за это наказывать. - person Charles Boyung; 18.04.2013
comment
Я не знал, что отвечать на твой собственный вопрос было плохо. На самом деле я думаю, что для этого есть значок. - person Tony Topper; 13.09.2013
comment
@AnthonyTopper Да, рекомендуется отвечать на свой вопрос, когда вы сами находите ответ. Это способ обмена знаниями. Некоторые люди видят в этом злой умысел, потому что вы получаете очки репутации и за вопрос, и за ответ. Некоторые люди смотрят на получение репутации, как на настоящие деньги или что-то в этом роде. В любом случае, то, что предлагал EJP, просто неверно. Вы никогда не должны публиковать ответы на вопросы в комментариях только потому, что вы сами задали вопрос. Если вам нужна дополнительная информация, просмотрите meta.stackexchange.com/questions/12513/ и ссылки там - person naugtur; 14.09.2013

arrow_upward
2
arrow_downward

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

person Sandeep Taneja    schedule 29.12.2012
comment
Это также правильно, но гораздо более общее — вы можете обновить любой раздел документа с помощью этого. И на SO много вопросов об этом :) - person naugtur; 13.02.2013

arrow_upward
0
arrow_downward

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

пытаться:

$('ul').append('<li><a href="test2.html' data-transition="slide" />List Item 2</li>');
person Cyber Slueth Omega    schedule 08.05.2011
comment
+1 отсутствие атрибута href изменяет стиль ссылки. - person Kyle Trauberman; 08.05.2011
comment
@Cyber ​​Sleuth Omega: Хорошая попытка, но это недопустимый HTML. Нет открытия ‹li› и закрытия ‹/a›. @cfarm54 исправьте это, и все должно работать. - person user207421; 08.05.2011
comment
@naugtur: согласно вашему ответу на решение, «все в порядке». Прими решение - person user207421; 10.05.2011
comment
.listview('refresh') это ответ. OP уже добавил некоторый html. атрибуты ничего не меняют - person naugtur; 10.05.2011

arrow_upward
0
arrow_downward

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

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

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

person thebugger    schedule 17.12.2012
comment
Это не очень хорошая практика. Что произойдет, когда выйдет новая версия и добавятся другие классы? Ваш источник будет перерыв. Лучшее решение — всегда использовать API используемого фреймворка, в этом случае используйте API jquerymobile. - person angelcervera; 21.12.2012