在jQuery Mobile中添加动态内容时正确格式化

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

Here是显示问题（添加jQuery和jquerymobile脚本和CSS在标题很明显）的例子：我试过，来电后添加.page()到append()

<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>

，但它不能正常工作，虽然好一些。

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

非常感谢您的帮助！

编辑：总之，我想动态添加元素融入listview的一个<li>元素，而不是试图元素添加到列表本身。刷新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

来源

2012-02-26 Mad Echet

PS：我也想知道为什么复选框似乎被禁用，并且在我的例子中默认情况下可折叠项目没有折叠，但这是次要的。 – 2012-02-26 20:31:58

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

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

我希望它有帮助！

来源

2012-02-27 09:41:54

这是我在http://jsfiddle.net/hbbvM上的工作示例 – 2012-02-27 11:56:26

不太清楚我按照说明。你是否正在寻找更多如何应用适当的风格。如果是这种情况，您将需要使用：

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

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

来源

2012-02-27 02:11:41 imaginethepoet

谢谢，但问题是，jquery mobile会在页面加载时创建一系列容器并重新组织元素。当我动态地添加新的jQuery元素（在这种情况下，输入复选框及其标签），重组从不发生，因此丑陋的演示。刷新工作在列表视图上，但在我的示例中，问题来自输入复选框，我没有将任何项目添加到列表中，而是将项目附加到列表中某个项目的可折叠部分。 – 2012-02-27 09:05:33

这个问题是因为，在将动态内容附加到listview之后，jquery移动类可能不会应用您的listview。所以尝试以下任何

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

来源

2012-02-27 04:01:45

谢谢，但正如我试图在另一个评论中解释的，我不添加元素到列表视图，而是将项目追加到div的一个元素的可折叠部分。刷新列表视图在这里似乎没有任何帮助。 – 2012-02-27 09:08:53

@Mad Echet：我认为你的onclick事件不会触发函数“addCheckbox（）”。你可以通过在你的函数代码的第一行放置警报来检查这一点...你可以在这里检查你的例子[link] http://jsfiddle.net/reddyprasad321/wECQx/5/ – 2012-02-27 09:52:38

谢谢你看看，我不'不知道为什么这个事件没有在你的例子中触发（我对jsfiddle不熟悉），但是对于我来说开火并不是问题（文本被正确添加，但格式化丢失）。我将尝试在jsfiddle中发布一个工作示例，但您可以在我的答案中找到我的解决方案。 – 2012-02-27 10:46:13

在jQuery Mobile中添加动态内容时正确格式化

回答

相关问题