0
正在使用Jquery mobile 1.4.1。我试图显示一个jQuery的移动列表视图,但是当使用Jquery插入代码时它不能正确显示。问题是,jQuery不插入CSS类。这里是我的代码以及相关截屏:
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>
我怎样才能解决这个问题?
[填充jQuery Mobile的ListView控件与当地JSON数据]的可能重复(HTTP ://stackoverflow.com/questions/21881830/populating-jquery-mobile-listview-with-local-json-data) – Omar
刷新你的列表视图 –