Я пытаюсь динамически добавить некоторый контент в список флажков в сворачиваемом элементе <li> в jQuery Mobile.Я не могу получить правильное форматирование с красивыми закругленными углами и сгруппированными элементами.Еще хуже становится, когда я добавляю другие элементы на уровне листа.
Здесь - пример, который показывает проблему (очевидно, добавьте jquery и jquerymobile скрипты и CSS в заголовок):
<body>
<div data-role="page" id="page">
<ul id="listList" data-role="listview">
<li id="list1" data-role="collapsible">
<h3>list 1</h3>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" id="fs1">
<input type="checkbox" id="cb1" /><label for="cb1">text</label></fieldset></div></li>
<li id="list2" data-role="collapsible">
<h3>list 2</h3>
<p>here comes another list of checkboxes...</p></li></ul>
<input type="button" onclick="addCheckbox();" value="add a checkbox to list1" /></div>
</body>
<script>
function addCheckbox() {
$("#list1 fieldset").append('<input type="checkbox" id="cb2" /><label for="cb2">More text</label>');
}
</script>
Я пытался добавить .page() после вызова append(), но он не работал должным образом, хотя и немного лучше.
Помимо моего примера, общий вопрос - как динамически добавлятьконтент в дерево DOM после того, как jQuery Mobile поигрался со структурой DOM.Я считаю, что существует функция, которая «jquerymobilizes» часть дерева, но я не могу найти ее.
Большое спасибо за вашу помощь!
РЕДАКТИРОВАТЬ: Короче говоря, я пытаюсьдинамически добавлять элементы в один <li> элемент listview и не пытаться добавлять элементы в сам список.Обновление listview здесь, похоже, не поможет.
РЕДАКТИРОВАТЬ 2: Я немного ближе, когда нашел функцию .trigger("create"), которая может быть связана с .append() (cf JQM FAQ ).С помощью следующего скрипта он работает немного лучше, хотя data-role="controlgroup" не обеспечивает правильного форматирования с красивыми закругленными прямоугольниками.
$("#list1 fieldset").append('<input type="checkbox" id="cb2" /><label for="cb2">More text</label>').trigger("create");
Я опубликую полный ответ, если доберусь туда в какой-то момент.
РЕДАКТИРОВАТЬ 3: Вот мой пример, показанный в jsFiddle