Jquery 第二次输出后，listview设计变得混乱

我的代码在显示listview项时起作用，但在函数的第二个实例之后，listview会出错

这就是它的样子：

这是我的密码：

   <div id="MainPage" data-role="page" >

        <div data-role="content">

            <a href="#ViewPage" data-role="button" onClick="displayArray( )">RENAME</a>

        </div>

    </div>

    <div id="ViewPage" data-role="page" >

        <div data-role="header" data-position="fixed">
            <a href="#MainPage" data-role="button" data-icon="back">BACK</a>
            <h1>View Page</h1>
        </div>

        <div data-role="content">
            <ul id="viewlist" data-role="listview" data-filter="true" data-filter-placeholder="Sample Contents" data-inset="true">
                     <!-- array contents goes here -->
            </ul>   
        </div>

    </div>  

    <script>

         var sampleContent = new Array( );

         displayArray( )
         {     
         var data='';    
           for(var scan=0; scan<sampleContent.length; detect++)
           {
             data+='<li><a href="#">' + sampleContent[scan] + '</a></li>';
           }
         $("#viewlist").empty().append(data);        
         }

    </script>

查看页面


var sampleContent=新数组（）；
displayArray（）
{     
var数据=“”；
对于（var扫描=0；扫描

HTML

<div id="MainPage" data-role="page">
    <div data-role="content"> <a href="javascript:void(0);" data-role="button" id="id1">RENAME</a>
    </div>
</div>
<div id="ViewPage" data-role="page">
    <div data-role="header" data-position="fixed"> <a href="#MainPage" data-role="button" data-icon="back">BACK</a>
        <h1>View Page</h1>
    </div>
    <div data-role="content">
        <ul id="viewlist" data-role="listview" data-filter="true" data-filter-placeholder="Sample Contents" data-inset="true"></ul>
    </div>
</div>


查看页面


JS

var sampleContent = new Array();
$("#id1").click(function () {
    sampleContent = [];
    $.mobile.changePage("#ViewPage", {
        changeHash: false
    });
    sampleContent.push("1");
    sampleContent.push("2");


    var data = '';
    for (var scan = 0; scan < sampleContent.length; scan++) {
        data += '<li ><a href="#">' + sampleContent[scan] + '</a></li>';
    }
    $("#viewlist").empty().append(data).listview('refresh');

});

var-sampleContent=new-Array（）；
$（“#id1”）。单击（函数（）{
样本内容=[]；
$.mobile.changePage（#ViewPage“{
changeHash:false
});
样本内容推送（“1”）；
样本内容推送（“2”）；
var数据=“”；
对于（var scan=0；scan