Jquery Mobile 面板动态列表视图无法正确呈现答案

【问题标题】：Jquery Mobile panel dynamic listview does not render correctlyJquery Mobile 面板动态列表视图无法正确呈现
【发布时间】：2013-08-29 15:41:13
【问题描述】：

我有一个 searchresults.php 页面，其中显示了已找到的几个用户。 searchresults.php 页面上还有一个面板

<div data-role="panel" id="mypanel" data-display="overlay" data-theme="a">
  <div id="loadedprofile">
  </div>
</div><!-- /panel -->

当我单击“用户 div”之一时，会触发以下 Jquery 函数以打开面板：

选择搜索结果的面板。

jQuery 代码：

$('[id=profile]').on("click", function(e) {

    e.preventDefault();
    var userid = $(this).attr('userid');
    //window.location.href = "userdetails.php?userid=" + userid;

    $("#mypanel").panel("open");
    $("#loadedprofile").load("userdetailspanel.php?userid=" + userid);

    $("#mypanel").trigger("updatelayout");

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

    $('[data-role=page]').trigger('pagecreate');
    $.mobile.activePage.trigger('pagecreate');

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

});

好的，所以面板正确打开并且动态页面（userdetailspanel.php）正确加载（见图）。但在 userdetailspanel.php 上也是一个列表视图。

<ul data-role="listview" data-inset="true" id="commandlist">
 <li>
  <a href="#" id="mylink" name="mylink" >
    <img src='bolt.png' class="ui-li-icon" />Link
  </a>
 </li>
</ul>

此列表视图未正确呈现。我只看到蓝色的超链接。

【问题讨论】：

标签： jquery-mobile

【解决方案1】：

将项目动态追加到面板后，调用.trigger('pagecreate');

$('[data-role=page]').trigger('pagecreate');

或

$.mobile.activePage.trigger('pagecreate');

Demo - jQM 1.3.2 及以下

对于 jQuery Mobile v 1.4，情况有所不同

$('.target').trigger('create')

Demo - jQM v 1.4 Aplha

【讨论】：

我喜欢你的演示，但对我来说它不起作用。我有一个稍微不同的场景。我用动态 PHP 页面打开面板。上面是一个静态列表视图。此列表视图未正确呈现。
我添加了该问题的图片。在这里你看到一个列表，但它没有正确呈现
@CoenDamen $.mobile.activePage.trigger('pagecreate'); 没用？我不确定这是否可行$('#commandlist').listview() 或$('#commandlist').listview().listview('refresh')。
在user.php 你只有listview html 代码还是其他代码？ @CoenDamen
我有其他代码（php 和 javascript），但这段代码没有问题，没有错误，代码从工作代码中重复使用（我曾经有一个单独的 user.php 页面，但现在我想改用面板

【解决方案2】：

好的，所以诀窍是在 userdetailspanel 部分的底部添加刷新。

所以，在 UL 之后，添加：

<script type="text/javascript">
       $('#commandlist').listview().listview('refresh');
</script>

【讨论】：

将其标记为答案。