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

#jquery #html #jquery-mobile

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

Ответ №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');
  

Комментарии:

1. @cfarm54 Пожалуйста, проверьте это, я думаю, это может сработать. Если нет, пожалуйста, прокомментируйте меня.

2. нет, не работает. я не думаю, что вы можете просто добавить это в jquery-mobile framework. вы пробовали использовать библиотеки? jquerymobile.com

3. @cfarm54 после добавления <li> вам нужно вызвать $('ul').listview('refresh') для обновления. Попробуйте это, если нет, пожалуйста, прокомментируйте меня.

4. Этот код медленный, сложный, и ответ не содержит решения — комментарий содержит.

5. @naugtur Привет, друг, проявляя должное уважение к твоему комментарию, я хочу отметить, что сначала я даю решение, и оно сработало для cfarm54, хотя оно завершается комментарием. итак, почему вы проголосовали против меня?

Ответ №2:

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

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

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

Комментарии:

1. Как я ответил на свой собственный вопрос, если OP — это @cfarm54, а я @naugtur?

2. @EJP — даже если он ответил на свой собственный вопрос, это поощряемая практика на stackexchange, и его не следует за это отчитывать.

3. Я не знал, что отвечать на ваш собственный вопрос было плохо. На самом деле, я думаю, для этого есть значок.

4. @AnthonyTopper Да, рекомендуется отвечать на свой вопрос, когда вы сами найдете ответ. Это способ обмена знаниями. Некоторые люди видят в этом недобрые намерения, потому что вы получаете очки репутации как за вопрос, так и за ответ. Некоторые люди смотрят на получение репутации так, как будто это реальные деньги или что-то в этом роде. В любом случае, то, что предлагал EJP, просто неверно. Вы никогда не должны публиковать ответы на вопросы в виде комментариев только потому, что вы сами задали вопрос. Если вам нужна дополнительная информация, просмотрите meta.stackexchange.com/questions/12513 /… и ссылки там

Ответ №3:

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

Комментарии:

1. Это тоже правильно, но гораздо более общего характера — вы можете обновить любой раздел документа с помощью этого. И есть много вопросов по SO, спрашивающих об этом 🙂

Ответ №4:

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

попробуйте:

$('ul').append('<li><a href="test2.html ' передача данных ="слайд" /> Элемент списка 2</li>');

Комментарии:

1. 1 пропуск href атрибута изменяет стиль ссылки.

2. @Cyber Sleuth Omega: Хорошая попытка, но это недопустимый HTML. Нет открытия <li> и закрытия </ a> . @cfarm54 исправьте их, и это должно сработать.

3. @naugtur: согласно вашему решению, «все в порядке». Решайтесь

4. .listview('refresh') это ответ. OP уже добавил некоторый html. атрибуты ничего не меняют

Ответ №5:

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

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

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

Комментарии:

1. Это не очень хорошая практика. Что происходит, когда выпускается новая версия и добавляются другие классы? Вашим исходным кодом будет break. Лучшим решением всегда является использование api используемого фреймворка, в данном случае используйте jquerymobile api.