Javascript 将 HTML 动态添加到 jquery mobile 后刷新部分
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5562461/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Refresh a section after adding HTML dynamically to jquery mobile
提问by dochead
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.
我看过一些关于此的帖子，但似乎没有一个真正适用，或者我可能只是读错了。我有一些从服务器提供给我的 HTML，我无法真正更改。我想要做的是，获取该 HTML，将其插入 div 元素并让 jQuery mobile 对其进行样式设置。我可能需要多次这样做，这就是痛苦发生的地方。
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.
当我第一次插入它时，一切都很好，jqm 选择了添加并完美地设计了它。如果我第二次尝试，jqm 根本不接。我试过制作一个我复制和修改的“模板”，或者只是插入静态 html 并且都不起作用。
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. :(
此外，我知道 jQuery mobile 中的选择列表 selectmenu 方法，但我返回的项目可能是单个/多个选择列表、一堆单选按钮甚至一组自由文本字段。如您所见，我还尝试在最顶层元素上运行 page 方法，也尝试在我即将添加的元素上运行 page 方法，但都无济于事。:(
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...
更新：使用下面的 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();
})
Update #2: Apparently this is now deprecated, see below for some ideas on how to fix in beta2.
更新 #2：显然这现在已被弃用，有关如何在 beta2 中修复的一些想法，请参见下文。
回答by naugtur
update
更新
As of jquery mobile beta2 you trigger an event - .trigger('create')
从 jquery mobile beta2 开始，您触发了一个事件 - .trigger('create')
FAQ updated: http://demos.jquerymobile.com/1.3.2/faq/injected-content-is-not-enhanced.html
常见问题更新：http: //demos.jquerymobile.com/1.3.2/faq/injected-content-is-not-enhanced.html
This is deprecated:
这已被弃用：
use .page()function.
使用.page()功能。
I suggest:
我建议：
- empty the div you populate
- create a new div inside
- populate the new div
- call
.page()on that new div
- 清空您填充的 div
- 在里面创建一个新的div
- 填充新的 div
- 调用
.page()那个新的 div
回答by csigrist
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.
我在这个问题上挣扎了几个小时，但没有任何效果。我有级联选择菜单，当在另一个菜单中选择一个选项时，这些菜单通过 ajax 调用进行填充。DOM 正在更新，但 jQM 拒绝识别新添加的选项。
What finally worked (and it was based on a hunch - I did not find it documented anywhere) was:
最终奏效的（它是基于一种预感——我没有在任何地方找到它的记录）是：
$('#controlName').selectmenu('refresh');
$('#controlName').selectmenu('refresh');
I am using JQM 1.0 RC2.
我正在使用 JQM 1.0 RC2。
