JQM (jQueryMobile) AJAX 内容列表视图('刷新') 问题无法正常工作

Question

这是我正在做的事情的模拟：

function loadPage(pn) {
    $('#'+pn).live('pagecreate',function(event, ui){
        $('#'+pn+'-submit').click( function() {
            $.mobile.changePage({
                    url: 'page.php?parm=value', 
                    type: 'post', 
                    data: $('form#'+pn+'_form')
                },'slide',false,false);

            loadAjaxPages(pn);
        });
});

function loadAjaxPages(page) {
    // this returns the page I want, all is working
    $.ajax({
        url: 'page.php?parm=value',
        type: 'POST',
        error : function (){ document.title='error'; }, 
        success: function (data) {                  
            $('#display_'+page+'_page').html(data); // removed .page(), causing page to transition, but if I use .page() I can see the desired listview
        }
    });
}

如果我添加 .page() （这在过去有效，但我将其放在页面函数之外，则在 ajax 调用返回中，将如何加载页面的逻辑更改为节省加载时间），使页面转换到下一页，但我可以看到列表视图的样式按照我想要的方式设置：

$('#display_'+page+'_page').html(data).page();

删除 .page() 修复了转换错误，但现在页面没有样式。我尝试过 listview('refresh') 甚至 listview('refresh',true) 但没有运气。

关于如何刷新列表视图有什么想法吗？

解决方案：

$.ajax({
    url: 'page.php?parm=value',
    type: 'POST',
    error : function (){ document.title='error'; }, 
    success: function (data) {                  
        $('#display_'+page+'_page').html(data);
        $("div#name ul").listview(); // add div wrapper w/ name attr to use the refresh
    }
});

Answer 1

1. 确保在 ul 元素上调用 .listview
2. 如果之前没有样式，您只需调用 .listview()，机器人刷新功能。如果您的 Firebug 设置正确，您应该已经看到一条错误消息告诉您这一点。

在您发布修复之前，我没有时间开始创建一些代码，但这里有我的一点建议：

if(data !== null){ $('#display_'+page+'_page').html(data).find("ul").listview() }

这比新的全局选择器好一点。另外 - 您不需要 div，如果您有多个 UL，则可以提供详细的选择器。

注意：以上代码需要data !== null。如果它为空 - 它将引发错误。

Answer 2

如果将项目添加到列表视图，则需要调用其上的refresh()方法来更新样式并创建添加的任何嵌套列表。例如：

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

请注意，refresh() 方法仅影响附加到列表的新节点。这样做是出于性能原因。刷新过程将忽略任何已增强的列表项。这意味着，如果您更改已增强的列表项上的内容或属性，这些内容将不会得到反映。如果您希望更新列表项，请在调用刷新之前将其替换为新标记。

更多信息此处。