listview 设计在第二次输出后变得一团糟答案

【问题标题】：listview design gets messed up after second outputlistview 设计在第二次输出后变得一团糟
【发布时间】：2014-02-11 14:13:39
【问题描述】：

我的代码可以显示列表视图项目，但是在函数的第二个实例之后列表视图变得混乱。

看起来是这样的：

这是我的代码：

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

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

【问题讨论】：

标签： jquery listview jquery-mobile

【解决方案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>

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

});

【讨论】：