Question

我花了好几个小时试图找到它的底部。我正在使用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);


     });


});

Answer 1

经过几个小时的撞击我的头后，我想出了这一点。查看下面的代码。

 $(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");

 });

}

Answer 2

像这样使用

$.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"); 
         });

Jquery Mobile在刷新时丢失了listview样式

2 个答案: