Possible Duplicate:
Dynamically adding collapsible elements
我看过一些关于此的帖子，但似乎没有一个真正适用，或者我可能只是读错了。我有一些从服务器提供给我的 HTML，但我无法真正对其进行更改。我想做的是，获取该 HTML，将其插入 div 元素并让 jQuery mobile 对其进行样式设置。我可能需要多次这样做，这就是痛苦发生的地方。
当我第一次插入它时，一切都很好，jqm 完美地拾取了添加内容和样式。如果我第二次尝试，jqm 根本不会接受它。我尝试过制作一个复制和修改的"template"，或者只是插入静态 html，但都不起作用。
我在下面有一个测试用例，正如您将看到的，单击“添加新列表”一次，就可以了，再次单击它，您将得到一个无样式的选择。我在某处读到过使用实时事件可能有效，但在这种情况下也不起作用。
此外，我知道 jQuery mobile 中的选择列表 selectmenu 方法，但我返回的项目可能是单个/多个选择列表、一堆单选按钮甚至一组自由文本字段。正如您所看到的，我还尝试在最上面的元素上运行 page 方法，我还尝试在我要添加的元素上运行 page ，但都无济于事。 :(
测试:
<!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="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.css" />
</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>
更新:使用下面 naugur 的答案，添加新列表功能看起来像......
$('#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:显然这现已被弃用，请参阅下面有关如何在 beta2 中修复的一些想法。
最佳答案
更新
从 jquery mobile beta2 开始，您会触发一个事件 - .trigger('create')
更新常见问题解答:http://demos.jquerymobile.com/1.3.2/faq/injected-content-is-not-enhanced.html
这已被弃用:
使用.page()函数。
我建议:
- 清空您填充的 div
- 在里面创建一个新的div
- 填充新的 div
- 在新的 div 上调用
.page()
关于javascript - 动态添加 HTML 到 jquery mobile 后刷新一个部分，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5562461/