Question

我正在使用jQuery Mobile构建移动网络应用程序，但我遇到了问题。我使用jQuery来解析XML文件并创建列表项。它会构建列表，然后将<li>列表应用到页面上的<ul>。我读到为了使列表正确设置样式，您必须在附加数据后刷新列表，以便jQuery Mobile可以将正确的样式设置到列表中。{/ p>

我的问题是列表永远不会刷新。它不断错误地设置样式。难道我做错了什么？我的代码是否正确？仅供参考，我尝试了.listview('refresh')，.listview()等各种变体。

CODE：

.listview('refresh')

谢谢！

Answer 1

我遇到了类似于你的代码遇到了这个问题。我的解决方案是将刷新放入$ .ajax“完成”选项。

        complete: function() {
            $('#list-id').listview('refresh');
        }

Answer 2

我的解决方案是在listview方法中不使用参数，如

<div data-role="page" id="playlist">
    <div data-role="header">
        <h1>my playlist</h1>
        <a href="index.html" data-icon="arrow-l">Back</a>
    </div>
    <div data-role="content"></div>
</div>

结束然后..

$('#playlist').bind('pageshow', function () {
    doOnCallBack = function(){
        $('#playlist').find('[data-role="listview"]').listview();
    }
    ajaxGet('${genSecureLink(action:'updatePlaylistTemplate',controller:'ajaxActionsPd',absolute:'true')}',$('#playlist').find('[data-role="content"]'),doOnCallBack);
});

这是我的函数ajaxGet：

function ajaxGet(url,target,doOnCallBack){
    $.ajax({
        url: url,
        error:function(x,e){handleAjaxError(x,e);},
        beforeSend:function(){$.mobile.showPageLoadingMsg();},
        complete:function(){$.mobile.hidePageLoadingMsg();doOnCallBack();},
        success:function(data, textStatus, jqXHR){target.html(data);}
    });
}

Answer 3

$("#podcastList").trigger("create");

Answer 4

Spike的答案对我有用 - 我的目标是ul的父级div。我还需要将ajax函数绑定到pagecreate - 即：

<div data-role="page" data-theme="b" id="my-page">
    <div data-role="header">
        <h1>Podcast List</h1>
    </div>
    <div data-role="content">
        <ul id="podcastList" data-role="listview">
        </ul>
    </div>
</div>
<script>
$('#mypage').bind('pagecreate',function(){
  // instead of $(window).load(function(){
        $.ajax({
            type: "GET",
            url: "podcast.xml",
            dataType: "xml",
            async: false,
            success: parseXml
            complete: function() {
               $('#podcastList').listview('refresh');
            } 
        });
 });
</script>

Answer 5

你的代码对我来说很好看......看起来几乎和我在我的应用程序中看起来一样。

问题可能在于您的HTML？它应该看起来像：

<div data-role="page" data-theme="b" id="my-page">
    <div data-role="header">
        <h1>Podcast List</h1>
    </div>
    <div data-role="content">
        <ul id="podcastList" data-role="listview">
        </ul>
    </div>
</div>

jQuery Mobile .listview（＆＃39; refresh＆＃39;）无效

5 个答案: