0

I am using HTML5,Jquery(v1.6.4) and Jquery-mobile(jquery.mobile-1.0.1.js).

I want to populate data dynamically using Jquery. After populating, Page is not displaying properly. Jquery-mobile themes and style-sheets are not effecting on the Page.

Code

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 code

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

Please help me out on this.

4

3 回答 3

1

您将li元素附加到#test以及格式错误的元素（开始和结束标记ul）。

您需要将li元素附加到ul元素，然后将其附加到#test元素。

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

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

var ul = $("<ul data-role='listview'></ul>");
ul.append("<li>foo</li>");
ul.appendTo("#test");
于 2012-06-14T08:56:10.490 回答
1

您正在动态创建一个列表，因此您需要告诉 jQuery Mobile 并要求它“增强”内容。你通过调用来做到这一点

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

如果您有要添加元素的现有增强列表，则需要告诉 JQM 增强新内容，方法是调用

$("changed-parent-element").listview("refresh");
于 2012-06-14T09:09:14.967 回答
0

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

<!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>
于 2012-06-14T08:58:24.297 回答