我正在使用jQuery Mobile为移动平台构建一个简单的Web应用程序，我打算从API中读取一些数据，将其作为JSON发送（我从服务器端基于Django的项目中公开），然后使用jQuery解析它机制，然后我根据该数据创建列表元素。现在，我有以下index.html：
<html>
<head>
<title>Playism App</title>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jm/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jsonParser.js"></script>
<link rel="stylesheet" type="text/css" href="css/major.css">
<link rel="stylesheet" type="text/css" href="js/jm/jquery.mobile-1.3.2.min.css">
<link rel="stylesheet" type="text/css" href="js/jm/jquery.mobile.theme-1.3.2.min.css">
</head>
<body>
<p>List of games: </p><br/>
<div id="gameContainer" data-role="page">
<ul data-role="listview" data-inset="true" data-filter="true" id="gamesList">
<!-- Content here will be dynamically generated based on the JSON output parsed from the API feed -->
<li><a href="#">Dummy</a></li>
</ul>
</div>
<script type="text/javascript" src="js/gamesRenderer.js"></script>
<script type="text/javascript">
$(document).ready(function(){
renderGames();
});
</script>
</body>
</html>
现在，只是为了测试我创建了Dummy列表元素并且它的呈现完美但是没有样式应用于我使用jQuery调用的.append（）注入的任何新元素。代码如下：
function renderGames(){
for (var i = objCreated.length - 1; i >= 0; i--) {
$("ul#gamesList").append("<li><a href='#''>" + objCreated[i].name + "</a></li></ul>");
};
}
并且在index.html中可以看到，我在DOM准备好调用它，但没有jQuery移动样式应用于这些手动注入的列表元素，而虚拟元素获得适当的样式。我认为调用元素的顺序有问题。提前致谢 ！
不要误会我的意思，但这个问题被问了很多次，但这里有一个解决方案：
function renderGames(){
for (var i = objCreated.length - 1; i >= 0; i--) {
$("ul#gamesList").append("<li><a href='#''>" + objCreated[i].name + "</a></li></ul>");
};
$("ul#gamesList").listview('refresh');
}
你需要使用：
$("ul#gamesList").listview('refresh');
使用动态添加的jQuery Mobile时，您必须手动启动标记增强过程。在这个article中了解更多相关信息。
另外一件事，永远不要使用jQuery Mobile准备文档，它们不应该合并。阅读更多关于它here。有时它有时不起作用。基本上在使用jQuery Mobile时总是使用页面事件。
你的最终JavaScript应该是这样的：
$(document).on('pagebeforeshow', '#gameContainer', function(){
renderGames();
});
function renderGames(){
for (var i = 10 - 1; i >= 0; i--) {
$("ul#gamesList").append("<li><a href='#''>Some object" + i + "</a></li></ul>");
};
$("ul#gamesList").listview('refresh');
}
似乎for循环使得css无法正常加载。不知道'objCreated'是什么。
尝试在JSFiddle中迁移代码。这是代码：
<body>
<p>List of games: </p><br/>
<div id="gameContainer" data-role="page">
<ul data-role="listview" data-inset="true" data-filter="true" id="gamesList">
<li><a href="#">Dummy</a></li>
</ul>
</div>
</body>
$(document).ready(function(){
renderGames();
});
function renderGames(){
$("ul#gamesList").append("<li><a href='#''>Hello world!</a></li></ul>")
}
css似乎适用于注入的元素。由于jQuery Mobile UI css的工作原理，list-style为“none”。
首先应用css并查看您的css文件是否正确链接
<link rel="stylesheet" type="text/css" href="css/major.css">
<link rel="stylesheet" type="text/css" href="js/jm/jquery.mobile-1.3.2.min.css">
<link rel="stylesheet" type="text/css" href="js/jm/jquery.mobile.theme-1.3.2.min.css">
然后JS和看到你的js文件正确链接
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jm/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jsonParser.js"></script>
<script type="text/javascript">
$(document).ready(function(){
renderGames();
});
</script>