listview设计在第二次输出后搞砸了

Question

我的代码工作，它显示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>

似乎有什么问题？我现在很困惑。任何帮助或建议都会很乐意接受。提前谢谢。

Answer 1

DEMO

<强> 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');

});