导航后动态JQM标头丢失

Question

过去几天我一直在玩JQM，几乎完成了我需要做的工作。

我的最后一个主要问题是如何处理列表的标题。

我有一个看起来像的嵌套列表。

我已更新页面布局中的标题以获取后退和选项按钮。

每当我点击带有列表的项目时，我会丢失标题并将其替换为新的标题

我不确定为什么会这样，因为我对这个框架很陌生。

我的listview代码看起来像

<ul data-role="listview" id="transactions" data-autodividers="true">
</ul>

  <script>
    $(function () {
       $(window).load(function() {
            getEmployeeList();
        });

        function getEmployeeList() {
            var menu='';
            $.ajax({
                url: '@Url.Action("GetTransactionData")',
                async:false,
                success: function (data) {
                    $.each(data, function (index, item) {
                        menu += '<li><span>' + item.Name + '</span><ul>';
                        //menu += '<li data-icon="star"><a href="#">' + item.Name + '</a></li>';
                        $.each(item.Transactions, function (t, td) {
                            menu += "<li data-icon='star'>" + td.Description + "</li>";
                        });
                        menu += '</ul></li>';
                        }

                    );
                }
            });
            $('#transactions').append(menu);
            $("#transactions").listview("refresh");
        }
    });
</script>    
}

有人能发现什么导致我丢失标题吗？

谢谢

编辑：

我的页面布局如下

    <div data-role="page" data-theme="c" id="start">
    <div data-role="header">
        @Html.ActionLink("Back", "Index", "Home", null, new { data_icon = "arrow-l", data_rel = "back" })
    <h1>@ViewBag.Title</h1>
        <a href="#dialog" data-icon="gear" class="ui-btn-right" data-rel="dialog" data-transition="fade" data-inline="true">Options</a>
    </div>
    <div data-role="content">
        <div class="body-frame">
          <ul data-role="listview" id="transactions" data-autodividers="true">
          </ul>
        </div>
    </div>
</div>