Question

我正在尝试动态地将一些内容添加到jQuery Mobile中可折叠<li>项中的复选框列表中。我无法通过漂亮的圆角和分组项目获得正确的格式。当我在叶级别添加其他元素时，情况会变得更糟。

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>

我在调用.page()之后尝试添加append()但是它虽然好一点但却无法正常工作。

除了我的例子，一般的问题是如何在jQuery Mobile玩弄DOM结构之后动态地将内容附加到DOM树。我相信存在一个“jquerymobilizes”树的一部分，但我找不到它。

非常感谢你的帮助！

编辑：简而言之，我正在尝试动态地将元素添加到<li>的一个listview元素中，而不是尝试将元素添加到列表本身。刷新listview似乎没有帮助。

编辑2：我发现.trigger("create")函数可以链接到.append()（cf JQM FAQ），我越来越近了。使用以下脚本虽然data-role="controlgroup"没有提供带有漂亮圆角框的正确格式，但效果稍好一些。

$("#list1 fieldset").append('<input type="checkbox" id="cb2" /><label for="cb2">More text</label>').trigger("create");

如果我在某个时候到达那里，我会发布完整的答案。

编辑3：以下是我在jsFiddle

中说明的示例

Answer 1

我想我可以回答我自己的问题，所以这就是我得到的：

在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");

我希望它有所帮助！

Answer 2

这个问题是因为在将动态内容附加到listview之后，jquery移动类可能不适用于您的列表视图。请尝试以下任何一种

$('#listList').listview('refresh');   //which refresh your list view
$('#listList').listview('refresh',true);   //which rebuilds the listview with your new content

Answer 3

我不太确定我会效仿。您是否正在寻找更多如何应用适当的风格。如果是这种情况，您将需要使用：

$('#mylist').listview('refresh');

这是在您将新项目添加到列表后。

在jquery mobile中添加动态内容时的正确格式

3 个答案: