动态添加 HTML 到 jquery mobile 后刷新一个部分
可能的重复：
动态添加可折叠元素
我看过一些关于此的帖子，但似乎没有一个真正起作用申请，否则我可能读错了。我有一些从服务器提供给我的 HTML，但我无法真正对其进行更改。我想要做的是，获取该 HTML，将其插入到 div 元素中，然后将其插入到 div 元素中。让 jQuery mobile 对其进行样式设计。我可能需要多次这样做，这就是痛苦发生的地方。
当我第一次插入时，一切都很好，jqm 拾取了加法 &它的风格完美。如果我第二次尝试，jqm 根本不会接受它。我尝试过制作一个复制和修改的“模板”，或者只是插入静态 html 和 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 中修复的一些想法。
Possible Duplicate:
Dynamically adding collapsible elements
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.
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.
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. :(
Test:
<!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>
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();
})
Update #2: Apparently this is now deprecated, see below for some ideas on how to fix in beta2.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
更新
从 jquery mobile beta2 开始，您触发一个事件 -
.trigger('create')常见问题更新：http://demos.jquerymobile.com/1.3.2/faq/injected-content-is-not-enhanced .html
已弃用：
使用
.page()函数。我建议：
.page()update
As of jquery mobile beta2 you trigger an event -
.trigger('create')FAQ updated: http://demos.jquerymobile.com/1.3.2/faq/injected-content-is-not-enhanced.html
This is deprecated:
use
.page()function.I suggest:
.page()on that new div我在这个问题上挣扎了几个小时，但没有任何效果。我有级联选择菜单，当在另一个菜单中选择一个选项时，这些菜单通过 ajax 调用填充。 DOM 正在更新，但 jQM 拒绝识别新添加的选项。
最终起作用的（它是基于预感 - 我没有在任何地方找到它的记录）是：
$('#controlName').selectmenu('refresh');我正在使用 JQM 1.0 RC2 。
I struggled with this one for hours and nothing was working. I have cascading select menus that were being populated via an ajax call when an option was selected in another menu. The DOM was being updated, but jQM refused to recognize the newly added options.
What finally worked (and it was based on a hunch - I did not find it documented anywhere) was:
$('#controlName').selectmenu('refresh');I am using JQM 1.0 RC2.