Возможный дубликат:
Динамическое добавление складных элементов
Я видел несколько сообщений по этому вопросу, но ни один из них действительно не применим, или я просто мог бы прочитать это неправильно. У меня есть HTML-код, который загружается мне с сервера, и я не могу его изменить. То, что я хочу сделать, это захватить этот HTML-код, вставить его в элемент div и настроить jQuery mobile на него. Я, возможно, должен сделать это несколько раз, и что там, где происходит боль.
Когда я вставляю его в первый раз, все отлично, jqm берет дополнение и стильно его стилирует. Если я попробую второй раз, jqm вообще не забирает его. Я попытался создать "шаблон", который я копирую и изменяю, или просто вставляю статический html и не работаю.
У меня есть тестовый пример ниже, как вы увидите, нажмите добавить новый список один раз, и это нормально, щелкните его еще раз, и вы получите незанятый выбор. Я где-то читал, что использование живого события может работать, но в этом случае это тоже не работает.
Кроме того, я знаю о методе select listu select в jQuery mobile, но элемент, который я возвращаю, может быть списком одиночных/множественных списков, группой переключателей или даже набором бесплатных текстовых полей. Как вы можете видеть, я также попытался запустить метод страницы на самом верхнем элементе, я также попробовал запустить страницу в элементе, который я собираюсь добавить, но безрезультатно.: (
Тест:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>List insert test</title>
<meta http-equiv="Pragma" content="no-cache" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<!-- include jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.js"></script>
<!-- include jQuery Mobile Framework -->
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.js"></script>
<link rel="stylesheet" href="#" onclick="location.href='http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.css'; return false;" />
</head>
<body>
<div data-role="page" data-theme="b" id="Dashboard">
<button id='addlist'>add new list</button>
<button id='addips'>add templated list</button>
<button id='clearall'>clear</button>
<div id='theplace'></div>
<div id='newtemp'>
<select id='thelisttemplate'>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<div id="thelist">
jkghjkgh
</div>
</div>
</body>
<script type="text/javascript">
$('#addips').live('click', (function() {
l = $('#thelisttemplate').clone()
$('#thelist').html('')
$('#thelist').append($(l))
$('#thelist').page()
}))
$('#addlist').click(function() {
l = $("<select id='thelisttemplate'><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option></select>")
$('#thelist').html('')
$('#thelist').append($(l))
$('#thelist').page()
//$('#theplace').after($("<select id='thelisttemplate'><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option></select>"))
//$('#thelisttemplate').page()
})
$('#clearall').click(function() {
$('#thelist').html('')
})
</script>
</html>
Обновление. Используя нижеприведенный ответ, функция добавления новых списков будет выглядеть как...
$('#addlist').click(function() {
l = $("<select id='thelisttemplate'><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option></select>")
$('#thelist').html('<div data-role="collapsible-set" id="newstuff"></div>');
$("#newstuff").html(l).page();
})
Обновление # 2: По-видимому, это теперь устарело, см. ниже некоторые идеи о том, как исправить в бета2.
