doc*_*ead 26 javascript jquery jquery-mobile
可能重复:
动态添加可折叠元素
我已经看到了一些这方面的帖子,但它们似乎都没有真正适用,或者我只是读错了.我有一些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>
<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的一些想法.
nau*_*tur 30
更新
从jquery mobile beta2开始你会触发一个事件 - .trigger('create')
常见问题更新:http://demos.jquerymobile.com/1.3.2/faq/injected-content-is-not-enhanced.html
不推荐使用:
使用.page()功能.
我建议:
.page()给那个新的div| 归档时间： |
|
| 查看次数： |
88723 次 |
| 最近记录： |