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

我正在尝试动态地将一些内容添加到jQuery Mobile中可折叠

项目中的复选框列表中。 我无法通过漂亮的圆角和分组项目获得正确的格式。 当我在叶级添加其他元素时，情况变得更糟。

这是一个显示问题的示例（显然在标题中添加jquery和jquerymobile脚本和CSS）：

  
 
 
 
list 1
 
 
 text
 
 
list 2
 
here comes another list of checkboxes...
 
   function addCheckbox() { $("#list1 fieldset").append('More text'); }  

我试着在调用append() .page()之后添加.page()但是它虽然好一点但是没有正常工作。

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

非常感谢你的帮助！

编辑：简而言之，我试图动态地将元素添加到listview一个

元素中，而不是尝试将元素添加到列表本身。 刷新listview在这里似乎没有帮助。

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

 $("#list1 fieldset").append('More text').trigger("create"); 

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

编辑3：这是我在jsFiddle中说明的例子

Answer 1

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

• 在jQuery Mobile中动态添加元素使用.trigger("create") （参见jQuery Mobile FAQ ）
• 将它们添加到可折叠元素的可折叠部分，将其添加到div.ui-collapsible-content或在可折叠部分中创建一个div容器，以便在此处直接添加内容
• 要获得分组复选框的精美渲染，您应该立即添加所有复选框（当我按顺序添加它们时，我无法获得圆滑的圆角

所以这是我的最终脚本，它可以满足我的需求：

 $("#list1 div[data-role='fieldcontain']").append('
' +'text' +'More text
' +'Delete') .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'); 

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