Jquery mobile：Listview無法正確顯示

正在使用Jquery mobile 1.4.1。我試圖顯示一個jQuery的移動列表視圖，但是當使用Jquery插入代碼時它不能正確顯示。問題是，jQuery不插入CSS類。這裏是我的代碼以及相關截屏：
screen shot Jquery mobile：Listview無法正確顯示

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Web service</title> 
     <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.1.css"> 
     <link rel="stylesheet" type="text/css" href="css/jquery.mobile.structure-1.4.1.css"> 
     <link rel="stylesheet" type="text/css" href="css/jquery.mobile.theme-1.4.1.css"> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>  
     <script src="js/jquery.mobile-1.4.1.min.js"></script> 

     <script> 
      $(document).ready(function() { 
       $.getJSON("http://localhost/WebService/web-service.php?format=json", function(result) { 
        var html = ""; 
        $.each(result.posts, function(i, field) { 
         html = html.concat("<li><a href='#'>" + field.post.fullname + "</a></li>"); 
        }); 
        document.getElementById('list').innerHTML = html; 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <!-- Start of first page --> 
     <div data-role="page" id="foo"> 

      <div data-role="header"> 
       <h1>Foo</h1> 
      </div><!-- /header --> 

      <div role="main" class="ui-content"> 
       <p>I'm first in the source order so I'm shown as the page.</p> 
       <p>View internal page called <a href="#bar">bar</a></p> 
       <ul data-role="listview" id="list"></ul> 

      </div> 
      <!-- /content --> 

      <div data-role="footer"> 
       <h4>Page Footer</h4> 
      </div><!-- /footer --> 
     </div><!-- /page --> 

     <!-- Start of second page --> 
     <div data-role="page" id="bar"> 

      <div data-role="header"> 
       <h1>Bar</h1> 
      </div><!-- /header --> 

      <div role="main" class="ui-content"> 
       <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p> 
       <p><a href="#foo">Back to foo</a></p> 
      </div><!-- /content --> 

      <div data-role="footer"> 
       <h4>Page Footer</h4> 
      </div><!-- /footer --> 
     </div><!-- /page --> 
    </body> 

</html>

我怎樣才能解決這個問題？

來源

2014-02-23 Taieb Baccouch

[填充jQuery Mobile的ListView控件與當地JSON數據]的可能重複（HTTP ：//stackoverflow.com/questions/21881830/populating-jquery-mobile-listview-with-local-json-data） – Omar

刷新你的列表視圖 –

你想顯示爲列表視圖？他們是這三個項目 1.bar 2.taieb baccouch 3.zahra daqrir 比下面的代碼可以幫助你..

<div> 
<ul data-role="listview" class="jqm-list"> 
<li><a><span>bar</span></a></li> 
<li><a><span>taieb baccouch </span></a></li> 
<li><a><span>zahra daqrir</span></li> 
</ul></div>

來源

2014-08-07 10:40:17 user3519216

Jquery mobile：Listview無法正確顯示

回答

相關問題