jQuery Mobile面板动态列表视图无法正确呈现 [英] Jquery Mobile panel dynamic listview does not render correctly

问题描述

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

I have a searchresults.php page which shows several users that have been found. Also on the searchresults.php page is a panel

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

当我单击用户div"之一时，将触发以下Jquery函数以打开面板:

When I click on one of the "user divs" the following Jquery function fires to open the panel:

一个用于选择搜索结果的面板.

a panel on select of a search result.

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也是一个列表视图.

Ok, so the panel opens up correctly and the dynamic page (userdetailspanel.php) is loaded correctly (see image). But ALSO on the userdetailspanel.php is a listview.

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

此列表视图显示不正确.我只看到蓝色的超链接.

This listview is not rendered correctly. I just see blue hyperlinks.

推荐答案

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

OK so the trick was to add the refresh at the bottom of the userdetailspanel part.

因此，在UL之后，添加:

So, after the UL, add:

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

这篇关于jQuery Mobile面板动态列表视图无法正确呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！