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

Question

我有一个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上的ALSO是一个列表视图。

<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>

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

Answer 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

Answer 2

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

所以，在UL之后，添加：

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