jQuery Mobile .listview('refresh') 不工作答案

【问题标题】：jQuery Mobile .listview('refresh') not workingjQuery Mobile .listview('refresh') 不工作
【发布时间】：2011-01-27 20:10:22
【问题描述】：

我正在使用 jQuery Mobile 构建移动 Web 应用程序，但遇到了问题。我正在使用 jQuery 解析 XML 文件并创建列表项。它构建列表，然后将<li>s 的列表附加到页面上的<ul>。我读到，为了使列表的样式正确，您必须在附加数据以刷新列表后调用.listview('refresh')，以便 jQuery Mobile 可以为列表设置正确的样式。

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

代码：

<script type="text/javascript">
  $(window).load(function() {
    $.ajax({
      type: "GET",
      url: "podcast.xml",
      dataType: "xml",
      async: false,
      success: parseXml
    });
  });

  function parseXml(xml) {
    var podcastList = "";
    $(xml).find("item").each(function() {
      podcastList += "<li class='ui-li-has-thumb ui-btn ui-btn-icon-right ui-li ui-btn-up-c' role='option' data-theme='c'><img src='" + $(this).find("itunes\\:image").attr("href") + "' class='ui-li-thumb'><h3 class='ui-li-heading'><a href='" + $(this).find("enclosure").attr("url") + "' class='ui-link-inherit'>" + $(this).find("title").text() + "</a></h3><p class='ui-li-desc'>" + $(this).find("itunes\\:subtitle").text() + "</p></li>";
    });
    $("#podcastList").append(podcastList);
    $("#podcastList").listview('refresh');
  }
</script>

谢谢！

【问题讨论】：

标签： jquery ajax listview mobile

【解决方案1】：

我遇到了这个问题，代码看起来与你的相似。我的解决方案是将刷新放入 $.ajax “完成”选项中。

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

【讨论】：

谢谢，我试试看！

【解决方案2】：

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

【讨论】：

【解决方案3】：

我的解决方案是像在

中那样在 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);}
    });
}

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：