在动态添加HTML到jquery mobile后刷新一个部分 [英] Refresh a section after adding HTML dynamically to jquery mobile
问题描述
可能重复：
动态添加可折叠元素
我看过几篇帖子这个，但它们似乎都没有真正应用，或者我只是读错了。我有一些HTML从服务器提供给我，我真的无法改变。我想要做的是，抓住HTML，将其插入div元素&让jQuery mobile做它的造型事。我可能需要多次这样做，而这就是痛苦发生的地方。
I've seen a few posts on this but none of them really seem to apply, or I could just be reading it wrong. I've got some HTML that's fed to me from a server that I can't really get changed. What I want to do is, grab that HTML, insert it into a div element & have jQuery mobile do it's styling thing on it. I potentially need to do that multiple times, and that's where the pain happens.
当我第一次插入它时，它一切都很好，jqm选择添加&完美的风格。如果我第二次尝试，jqm根本不会接受它。我已经尝试制作一个我复制和修改的模板，或者只是插入静态html&但是没有工作。
When I insert it the 1st time, it's all fine, jqm picks up the addition & styles it perfectly. If I try a 2nd time, jqm doesn't pick it up at all. I've tried making a 'template' that I copy and modify or just inserting static html & neither work.
我在下面有一个测试用例，你会看到，点击一次添加新列表，没关系，再次点击它&你得到一个没有风格的选择。我在某处读过使用直播活动可能会有效，但在这种情况下也不行。
I've got a test case below, as you'll see, click add new list once, and it's fine, click it again & you get an unstyled select. I've read somewhere that using the live event may work, but that doesn't work in this case either.
另外，我知道选择列表selectmenu方法jQuery mobile，但我收到的项目可能是单个/多个选择列表，一堆单选按钮甚至是一组自由文本字段。正如你所看到的，我也尝试在最顶层的元素上运行页面方法，我也尝试在我即将添加的元素上运行页面，但都无济于事。 :(
Also, I know about the select list selectmenu method in jQuery mobile, but the item I get back could be single/multiple select lists, a bunch of radio buttons or even a set of free text fields. As you can see, I've also tried running the page method on the topmost element, I've also tried running page on the element I'm about to add, all to no avail. :(
测试：
<!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答案，添加新列表功能看起来像......
Update: Using naugur's answer below, the add new list function would look like...
$('#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。
Update #2: Apparently this is now deprecated, see below for some ideas on how to fix in beta2.
推荐答案
更新
从jquery mobile beta2开始，你会触发一个事件 - .trigger（'create'）
As of jquery mobile beta2 you trigger an event - .trigger('create')
常见问题更新： http://demos.jquerymobile.com/ 1.3.2 / faq / inject-content-is-not-enhanced.html
不推荐使用：
使用 .page（）功能。
我建议：
- 清空你填充的div
- 在里面创建一个新的div
- 填充新的div
- 在新div上调用
.page（）
- empty the div you populate
- create a new div inside
- populate the new div
- call
.page()on that new div
这篇关于在动态添加HTML到jquery mobile后刷新一个部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
