Jquery移动css没有反映在HTML页面上？_Jquery_Html_Jquery Mobile

Jquery移动css没有反映在HTML页面上？

jquery html jquery-mobile

Jquery移动css没有反映在HTML页面上？,jquery,html,jquery-mobile,Jquery,Html,Jquery Mobile,我正在使用HTML5、Jquery（v1.6.4）和jQueryMobile（Jquery.mobile-1.0.1.js）我想使用Jquery动态填充数据。填充后，页面未正确显示。Jquery移动主题和样式表不会影响页面代码 Test.html <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="jquery.mobile-1.0.1.css" type="text/css" cha

我正在使用HTML5、Jquery（v1.6.4）和jQueryMobile（Jquery.mobile-1.0.1.js）

我想使用Jquery动态填充数据。填充后，页面未正确显示。Jquery移动主题和样式表不会影响页面

代码

Test.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="jquery.mobile-1.0.1.css" type="text/css" charset="utf-8">
<link rel="stylesheet" href="jquery.mobile.structure-1.0.1.css" type="text/css" charset="utf-8">

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"src="jquery.mobile-1.0.1.js"></script>
<script src="main.js" type="text/javascript" charset="utf-8"></script>

<title>Test</title>
 </head>
  <body>
        <div id="test"> </div>
</body>
</html>


试验

main.js代码

 $(document).ready(function(){

    $("#test").append("<ul data-role='listview'>"); 
    $("#test").append("<li>Srikanth</li>");
    $("#test").append("<li>Chil</li>");
    $("#test").append("<li>Devi</li>");
    $("#test").append("</ul>");
 });

$（文档）.ready（函数（）{
$（“#测试”）.append（“”）；
$（“#测试”）。追加（“Srikanth”）；
$（“#测试”）。追加（“Chil”）；
$（“#测试”）。追加（“Devi”）；
$（“#测试”）。附加（“”）；
});

请帮我解决这个问题。

您正在将

li

元素添加到

#test

以及格式错误的元素（ul的开始和结束标记）

您需要将

li

元素附加到

ul

元素，然后将其附加到

#test

元素

（append（）在DOM上工作，它不仅仅像字符串一样将HTML代码放入元素中。）

所以它看起来应该更像这样：

var ul = $("<ul data-role='listview'></ul>");
ul.append("<li>foo</li>");
ul.appendTo("#test");

var-ul=$（“”）；
ul.附加（“foo”）；
ul.附录（“测试”）；

请使用文件的绝对路径，或至少使用./从当前文件夹加载

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./jquery.mobile-1.0.1.css" type="text/css" charset="utf-8">
<link rel="stylesheet" href="./jquery.mobile.structure-1.0.1.css" type="text/css" charset="utf-8">

<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript"src="./jquery.mobile-1.0.1.js"></script>
<script src="./main.js" type="text/javascript" charset="utf-8"></script>

<title>Test</title>
 </head>
  <body>
        <div id="test"> </div>
</body>
</html>


试验

您正在动态创建一个列表，因此您需要告诉jQuery Mobile，并要求它“增强”内容。你可以打电话来

$("changed-parent-element").listview("create");

$("changed-parent-element").listview("refresh");

如果您有一个现有的增强列表，您需要向其中添加元素，那么您需要告诉JQM通过调用来增强新内容

$("changed-parent-element").listview("create");

$("changed-parent-element").listview("refresh");