Question

以下标记

<div data-role="main">
    <ul id="summary" data-role="listview" data-inset="true">
        <li><a href="#">elem</a>
    </ul>
</div>

在页面初始加载

上的样式如下

<div data-role="main">
    <ul id="summary" data-role="listview" data-inset="true" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
        <li class="ui-first-child ui-last-child"><a href="#" class="ui-btn ui-btn-icon-right ui-icon-carat-r">elem</a></li>
    </ul>
</div>

但是，如果我应用新内容（li元素）并执行recommended .trigger("create")

    var html = "";
    objects.forEach(function(object)
    {
        html += "<li id=\"o_" + object.id + "\"><a href=\"#\">"
            + object.name 
            + "</a></li>";
    });

    var ul = $("ul#summary");
    ul.empty();
    $(html).appendTo(ul).trigger("create");

未应用样式，而是获得以下内容：

<div data-role="main">
    <ul id="summary" data-role="listview" data-inset="true" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
        <li id="o_0"><a href="#" class="ui-link">elem</a></li>
    </ul>
</div>

我也试过.trigger("refresh") .enhanceWithin() .refresh()和.refreshView()无效。

如何让Jquery-Mobile在这种情况下设置新动态内容的样式？

的jquery-1.12.3.js
jquery.mobile-1.4.5.js

Answer 1

尝试了很多组合之后，我发现ul.listview("refresh")是唯一有效的组合：

        var ul = $("ul#summary");
        ul.empty();
        $(html).appendTo(ul);
        ul.listview("refresh");

我不喜欢这个解决方案，因为它要求我知道ul是列表视图。

我希望有人可以通过更通用的解决方案来改进这个答案，如果有的话，我会分配勾号。

当内容动态更改时，无法将样式应用于列表视图

1 个答案: