可能重复:
动态添加可折叠元素
我已经看到了一些这方面的帖子,但它们似乎都没有真正适用,或者我只是读错了.我有一些HTML从服务器提供给我,我真的无法改变.我想要做的是,获取HTML,将其插入div元素并让jQuery mobile在它上面做样式.我可能需要多次这样做,这就是痛苦发生的地方.
当我第一次插入它时,它一切都很好,jqm拾取添加和完美的样式.如果我第二次尝试,jqm根本不会拿起它.我已经尝试制作一个我复制和修改的"模板",或者只是插入静态HTML并且都不起作用.
我在下面有一个测试用例,正如你所看到的,点击一次添加新列表,没关系,再点击它就可以得到一个没有样式的选择.我在某处读过使用直播活动可能会有效,但在这种情况下也不行.
此外,我知道jQuery mobile中的选择列表selectmenu方法,但我得到的项目可能是单/多选列表,一堆单选按钮甚至一组自由文本字段.正如你所看到的,我也尝试在最顶层的元素上运行页面方法,我也尝试在我即将添加的元素上运行页面,但都无济于事.:(
测试:
<!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> …来源:http://jquerymobile.com/demos/1.0a2/#docs/content/content-collapsible.html 当我手动向我的代码添加这样的元素时,它会正确显示.但是当我尝试使用jQuery添加它时:
$('body').append('<div data-role="collapsible"><h3>Title</h3><p>Content</p></div>');
它只显示h3中的标题和它下面的内容,因此不是可折叠元素.我怎样才能解决这个问题？