jQuery动态列表样式

Question

我编写了以下代码

$(xml).find('list').each(function() {
  $("#content_groups ul").append("<li><a href='#membergroup' onclick='functionare(\"" + $(this).attr("name") + "\")'>" + $(this).attr('name') + "</a><input type='checkbox' name='checkbox-0' id='checkbox-mini-0' class='custom' data-mini='true' /></li>");
});
$("#content_groups ul").listview('refresh');

结果不是我想要的，即复选框根本没有jquery css样式。你能告诉我这是什么问题吗？

结果如下：

我基本上对所有jquery / javascript都不熟悉，我只需要在我的项目中显示一些来自xml的结果。

Answer 1

虽然我没有足够的信息来解决手头的问题，但我想解释一下当前的方法没有以干净的方式实现DOM。

最好将所有新的html一起添加到var中，然后在最后添加新创建的html。

var content_groups;
$(xml).find('list').each(function() {
  content_groups += "<li><a href='#membergroup' onclick='functionare(\"" + $(this).attr("name") + "\")'>" + $(this).attr('name') + "</a><input type='checkbox' name='checkbox-0' id='checkbox-mini-0' class='custom' data-mini='true' /></li>";
});
$("#content_groups ul").append(content_groups);
$("#content_groups ul").listview('refresh');

我知道这并不能真正解决您的问题，但它可以减少您的网站在Internet Explorer中冻结的时间。

Answer 2

首先要考虑的几件事情。

$("#content_groups ul").listview('refresh');

只会设置列表视图的样式而已。

要为check box设置样式，您需要使用类似这样的适当函数：

$("#checkbox-mini-0").checkboxradio('refresh');

不幸的是，这对您没有帮助，因为jQuery Mobile无法设置正常的复选框元素。如果您使用标准复选框，则最终结果将是正常复选框。

jQuery Mobile复选框如下所示：

<div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
            <legend>Agree to the terms:</legend>
            <input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
            <label for="checkbox-1">I agree</label>
    </fieldset>
</div>

您可以使用此代码并将其插入到listview li元素中（当然，您仍然需要使用 .checkboxradio（'refresh'）; 来设置它，但这仍然无法帮助你是因为jQuery Mobile复选框永远不会在listview中使用。

但您可以在列表视图中创建自定义复选框，以下是我的示例：https://stackoverflow.com/a/13634738/1848600