我正在尝试动态地将一些内容添加到可折叠< li>中的复选框列表中. jQuery Mobile中的项目.我无法通过漂亮的圆角和分组项目获得正确的格式.当我在叶级添加其他元素时,情况变得更糟.
Here是一个显示问题的示例(显然在标题中添加jquery和jquerymobile脚本和CSS)：
<body>
<div data-role="page" id="page">
<ul id="listList" data-role="listview">
<li id="list1" data-role="collapsible">
<h3>list 1</h3>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" id="fs1">
<input type="checkBox" id="cb1" /><label for="cb1">text</label></fieldset></div></li>
<li id="list2" data-role="collapsible">
<h3>list 2</h3>
<p>here comes another list of checkBoxes...</p></li></ul>
<input type="button" onclick="addCheckBox();" value="add a checkBox to list1" /></div>
</body>
<script>
function addCheckBox() {
$("#list1 fieldset").append('<input type="checkBox" id="cb2" /><label for="cb2">More text</label>');
}
</script>
我试着在调用append()之后添加.page()但是它虽然好一点但是没有正常工作.
除了我的例子,通用的问题是如何在jQuery Mobile玩弄DOM结构之后动态地将内容附加到DOM树.我相信存在一个“jquerymobilizes”部分树的功能,但我找不到它.
非常感谢你的帮助！
编辑：简而言之,我试图动态地将元素添加到listview的一个< li>元素中,而不是尝试将元素添加到列表本身.刷新列表视图在这里似乎没有帮助.
编辑2：我发现.trigger(“创建”)函数可以链接到.append()(参见JQM FAQ).使用以下脚本虽然data-role =“controlgroup”没有提供带有漂亮圆角框的正确格式,但效果稍好一些.
$("#list1 fieldset").append('<input type="checkBox" id="cb2" /><label for="cb2">More text</label>').trigger("create");
如果我在某个时候到达那里,我会发布完整的答案.
编辑3：这是我在jsFiddle中说明的例子
解决方法
我想我可以回答我自己的问题,所以这就是我得到的：
>在jQuery Mobile中动态添加元素使用.trigger(“create”)(参见jQuery Mobile FAQ)
>将它们添加到可折叠元素的可折叠部分,将其添加到div.ui-collapsible-content或在可折叠部分中创建一个div容器,以便直接在那里添加内容
>为了获得分组复选框的精美渲染,您应该立即添加所有复选框(当我按顺序添加它们时,我无法获得圆滑的圆角
所以这是我的最终脚本,它可以满足我的需求：
$("#list1 div[data-role='fieldcontain']").append('<fieldset data-role="controlgroup">'
+'<input type="checkBox" id="cb1" /><label for="cb1">text</label>'
+'<input type="checkBox" id="cb2" /><label for="cb2">More text</label></fieldset>'
+'<a href="index.html" data-role="button" data-icon="delete">Delete</a>')
.trigger("create");
我希望它有所帮助！
