jquery mobile 页面动态添加

今天用JQUERY MOBILE动态添加元素，最后元素显示并未渲染。一直以为是JQM不熟悉的问题，找了蛮久的资料，没找到原因。最终查看了一下元素，终于发现错误了。其实jqm的使用并没有问题，问题出在动态加载时，我把li加到ul后面了，而不是appendto ui.

贴下修改后的代码：

js代码

 function getUserList(e, data) {
            $.get("../handler/usrManager.ashx", { type: "usrlist", s: "0", cnt: "10" }, function (data, textStatus) {//返回json
                $("#usrList_Content").append("<ul data-role='listview'></ul>");
                for (var i = 0; i < data.length; i++) {
                    var temp = "<li><a>" + data[i].Name + "</a></li>";
                    $("#usrList_Content ul").append(temp);

                }
                $("#usrList_Content").trigger("create");//important!! render the element
            }, "json");

        }

html:

<div id="usrManage_Main" tabindex="0" data-role="page"> 
        <div data-role="header"  data-theme="b">
            <h3>用户管理</h3>
            <a  data-role="button" data-icon="home"  class="ui-btn-left" data-iconpos="notext" href="Index.aspx"></a>
            <strong style="float:right" class="ui-btn-right"><%=((DAC_Model.users)Session["users"]).Name%></strong>
        </div> 
        <div data-role="content">
            <ul data-role="listview">
                <li><a href="#usrManage_usrlist">用户列表</a></li>
                <li><a >page2</a></li>
                <li><a > page3</a></li>
            </ul>
        </div> 
        <div data-role="footer"><a data-rel="back" class="ui-icon-arrow-l ui-btn-left" data-iconpos="left">返回</a></div> 
    </div> 

    <div id="usrManage_usrlist" data-role="page"> 
        <div data-role="header">
        <h3>用户列表</h3>
            <a  data-role="button" data-icon="home"  class="ui-btn-left" data-iconpos="notext" href="Index.aspx">123</a>
        </div> 
        <div data-role="content" id="usrList_Content"></div> 
        <div data-role="footer"><a data-rel="back" class="ui-icon-arrow-l ui-btn-left" data-iconpos="left">返回</a></div> 
    </div>