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

【问题标题】：Jquery Mobile loses listview styles on refreshJquery Mobile 在刷新时丢失列表视图样式
【发布时间】：2014-03-30 04:00:53
【问题描述】：

我花了几个小时试图弄清这个问题。我正在使用 Jquery mobile 输出事件列表。

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

我已经尝试过刷新选项“$("#vg_list").listview("refresh");"无济于事从 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);


     });


});

【问题讨论】：

标签： jquery listview mobile styles refresh

【解决方案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"); 
         });

【讨论】：

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

 });

}

【讨论】：