Jquery Mobile 在刷新时丢失列表视图样式

Question

我花了几个小时试图弄清楚这一点。我正在使用Jquery移动版来输出事件列表。

页面加载，列表视图正常运行。我可以毫无问题地遍历我的应用程序，但是当我刷新页面时，许多其他人发现 JM 样式被丢弃了。我已经尝试了论坛上提供的大多数（如果不是全部）解决方案，这可能意味着我没有正确实施该建议，或者它们与我的代码无关。

我尝试了刷新选项"$（"#vg_list"）.listview（"刷新"）;"无济于事从 jquery 文档中看，这似乎只是使用 append 时相对的。

我也尝试了document.ready函数的替代方案，但没有成功。这是我下面的代码。任何帮助将不胜感激。

<div id="mygatherings"
    data-theme="a"
    data-role="page"
           data-title="View Source:mygatherings">
    <!-- header: My Gatherings  start -->
            <div data-role="header"
        data-theme="a"
        data-position="fixed"
        data-id="vs_header">
        <h1>My Gatherings</h1>
        <a href="#home"
            data-icon="home"
            data-iconpos="notext"
                            data-transition="slide"
            >Home</a>
        <a href="#"
            data-icon="back"
            data-iconpos="notext"
                            data-rel="back"
                            data-transition="slide"
            >back</a>
            </div><!-- My Gatherings : create end --> 
            <!-- Content:My Gatherings start -->

             <div id="vg" data-role="listview" ></div>
$(document).ready(function(){
 $.getJSON("fetch.php", function(data) {
   var output='<ul  data-role="listview">';
   $.each(data.result,function(key,val){
     output+='<li>';
       output+='<h3>Event Name:' + val.name + '</h3>'; 
       output+='<p>Location:' + val.location + '</p>'; 
       output+='<il>Contact:'+ val.email + '</li>'; 
       output+='</li>';
            });
       output+='</ul>';
       $('#vg').html(output);

     });

});

Answer 1

这样用

法

$.getJSON("fetch.php", function(data) {
   var output='<ul  data-role="listview">';
   $.each(data.result,function(key,val){
     output+='<li>';
       output+='<h3>Event Name:' + val.name + '</h3>'; 
       output+='<p>Location:' + val.location + '</p>'; 
       output+='<il>Contact:'+ val.email + '</li>'; 
       output+='</li>';
            });
       output+='</ul>';
       $('#vg').html(output);

     }).done(function(){
     $("#listviewid").listview().listview("refresh"); 
         });

Answer 2

经过几个小时的头撞墙，我想通了。查看下面的代码。

 $(document).on('pagebeforeshow', '#mygatherings', function(){ 
                update();
   });
function update(){      
 $.getJSON("fetch.php", function(data) {
   var output='<ul  data-role="listview">';
   $.each(data.result,function(key,val){
     output+='<li>';
       output+='<h3>Event Name:' + val.name + '</h3>'; 
       output+='<p>Location:' + val.location + '</p>'; 
       output+='<il>Contact:'+ val.email + '</li>'; 
       output+='</li>';
       output+='</ul>'; 
    });
  $('#vg').html(output);
  $("#vg").listview("refresh");
 });
}