Question

我似乎无法找出发生这种情况的原因：我在jQuery Mobile中使用data-inset="true"创建了一个无序列表，当它第一次呈现时，它的顶部和底部都是圆形的。但是，在向列表中动态添加新元素并在其上调用listview('refresh')之后，它将呈现为非插入列表。

更新：仅当在不在当前活动页面上的列表上调用listview('refresh');时才会发生这种情况。当您转到包含列表的页面时，列表视图将更新为与插入列表相关的所有样式，除了顶部和底部的圆角。要重现此错误，请使用以下代码：http://jsfiddle.net/94X7S/10/

以下是调用.listview('refresh');

之前列表中的HTML的内容

<ul data-role="listview" data-inset="true" data-theme="c" data-divider-theme="b" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
    <li data-role="list-divider" role="heading" class="ui-li ui-li-divider ui-btn ui-bar-b ui-corner-top ui-btn-up-undefined">
        User Reviews (4) <span class="rate"><img src="..." alt="Rating"/></span>
    </li>
    <li data-theme="c" class="ui-btn ui-btn-up-c ui-btn-icon-right ui-li-has-arrow ui-li">
        <div class="ui-btn-inner ui-li" aria-hidden="true">
            <div class="ui-btn-text">
                <a href="#reviews" class="ui-link-inherit">
                    <h3 class="ui-li-heading"><img src="..." alt="Rating"/>Review Title</h3>
                    <p class="ui-li-desc">Review Content...</p>
                </a>
            </div>
            <span class="ui-icon ui-icon-arrow-r ui-icon-shadow"/>
        </div>
    </li>
    <li data-theme="c" class="ui-btn ui-btn-up-c ui-btn-icon-right ui-li-has-arrow ui-li ui-corner-bottom">
        <div class="ui-btn-inner ui-li" aria-hidden="true">
            <div class="ui-btn-text">
                <a href="#reviews" class="ui-link-inherit">
                    <h3 class="ui-li-heading"><img src="..." alt="Rating"/>Review Title</h3>
                    <p class="ui-li-desc">Review Content...</p>
                </a>
            </div>
            <span class="ui-icon ui-icon-arrow-r ui-icon-shadow"/>
        </div>
    </li>
</ul>

以下是调用.listview('refresh');后列表中的HTML的内容＆LT;

ul data-role="listview" data-inset="true" data-theme="c" data-divider-theme="b" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
    <li data-role="list-divider" role="heading" class="ui-li ui-li-divider ui-btn ui-bar-b">
        User Reviews (4) <span class="rate"><img src="..." alt="Rating"/></span>
    </li>
    <li data-theme="c" class="ui-btn ui-btn-up-c ui-btn-icon-right ui-li-has-arrow ui-li">
        <div class="ui-btn-inner ui-li" aria-hidden="true">
            <div class="ui-btn-text">
                <a href="#reviews" class="ui-link-inherit">
                    <h3 class="ui-li-heading"><img src="..." alt="Rating"/>Review Title</h3>
                    <p class="ui-li-desc">Review Content...</p>
                </a>
            </div>
            <span class="ui-icon ui-icon-arrow-r ui-icon-shadow"/>
        </div>
    </li>
    <li data-theme="c" class="ui-btn ui-btn-up-c ui-btn-icon-right ui-li-has-arrow ui-li">
        <div class="ui-btn-inner ui-li" aria-hidden="true">
            <div class="ui-btn-text">
                <a href="#reviews" class="ui-link-inherit">
                    <h3 class="ui-li-heading"><img src="..." alt="Rating"/>Review Title</h3>
                    <p class="ui-li-desc">Review Content...</p>
                </a>
            </div>
            <span class="ui-icon ui-icon-arrow-r ui-icon-shadow"/>
        </div>
    </li>
</ul>

请注意，在<li>之后，第一个和最后一个listview('refresh');上的某些类缺失了 - 是否存在这种情况发生的原因或可以采取哪些措施来防止这种情况发生？任何帮助将不胜感激。

Answer 1

导航到第二页时，我明白了你的意思。当他们所在的页面实际显示时，解决方法是仅refresh listview个元素：

$('.add').click( function(){

    //you can combine selectors by adding a comma in-between them
    $('#1, #2').append('<li>' + count + '</li>');

    //refresh the listview on the current page (if it exists)
    $(this).closest('.ui-content').find('.ui-listview').listview('refresh');

    count++;
});

$('[data-role="page"]').bind('pageshow', function () {

    //refresh the listview on the current page (if it exists)
    $(this).find('.ui-listview').listview('refresh');
});

以下是演示：http://jsfiddle.net/94X7S/12/

jQM listview（'refresh'）;打破插入列表

1 个答案: