我是JQM和JavaScript的新手。我正在开发一个移动应用程序，其中将包含将动态生成的列表。我举了一个示例，该示例可以生成正常的列表项以及可以动态生成的项。我在此页面上使用以下示例：http : //the-jquerymobile-tutorial.org/jquery-mobile-tutorial-CH11.php
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="user-scalable=no,width=device-width" />
<link rel=stylesheet href=jquery.mobile/jquery.mobile.css />
<script src=jquery.js></script>
<script src=jquery.mobile/jquery.mobile.js></script>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Home</h1>
</div>
<div data-role=content>
<ol id=list1 data-role=listview data-inset=true>
<li data-role=list-divider>Static list</li>
<li data-icon=delete>
<a href=#>Element 1.1</a>
</li>
<li data-icon=delete>
<a href=#>Element 1.2</a>
</li>
<li data-icon=delete>
<a href=#>Element 1.3</a>
</li>
</ol>
</div>
</div>
</body>
</html>
<script>
var html = "";
html += "<ol id=list2 data-role=listview data-inset=true>";
html += "<li data-role=list-divider>Dynamic list</li>";
html += "<li data-icon=delete>";
html += "<a href=#>Element 2.1</a>";
html += "</li>";
html += "<li data-icon=delete>";
html += "<a href=#>Element 2.2</a>";
html += "</li>";
html += "<li data-icon=delete>";
html += "<a href=#>Element 2.3</a>";
html += "</li>";
html += "</ol>";
$("#home div:jqmData(role=content)").append (html);
</script>
如果我将脚本部分移到一个函数中，说AddItem（）{}并调用该函数以将Dynamic项目附加到下拉菜单中，则其他项目的格式不正确，并显示为简单文本。
请澄清一下，如果我只修改以下行：
<li data-icon=delete>
<a href=# onclick="AddItem()">Element 1.1</a>
</li>
并将脚本转换为以下功能，它将开始出现异常：
function AddItem()
{
var html = "";
html += "<ol id=list2 data-role=listview data-inset=true>";
html += "<li data-role=list-divider>Dynamic list</li>";
html += "<li data-icon=delete>";
html += "<a href=#>Element 2.1</a>";
html += "</li>";
html += "<li data-icon=delete>";
html += "<a href=#>Element 2.2</a>";
html += "</li>";
html += "<li data-icon=delete>";
html += "<a href=#>Element 2.3</a>";
html += "</li>";
html += "</ol>";
$("#home div:jqmData(role=content)").append (html);
}
有人可以帮我吗。
感谢和问候
与
======编辑========谢谢Omar！那真的很有帮助。
当我打算动态创建一个多级列表时，我更改了如下功能，以便它递归地调用下一级菜单：
function CreateMenu(x)
{
x++;
var html = "";
html += "<ol id=list2 data-role=listview data-inset=true>";
html += "<li data-role=list-divider>Dynamic list</li>";
html += "<li data-icon=arrow-r>";
html += '<a onclick="CreateMenu(' + x + ')">Element ' + x + '.1</a>';
html += "</li>";
html += "<li data-icon=arrow-r>";
html += '<a onclick="CreateMenu(' + x + ')">Element ' + x + '.2</a>';
html += "</li>";
html += "<li data-icon=arrow-r>";
html += '<a onclick="CreateMenu(' + x + ')">Element ' + x + '.3</a>';
html += "</li>";
html += "</ol>";
$("[data-role=content]").empty();
$("[data-role=content]").append(html);
$("#list2").listview();
return;
}
虽然有效，但这是我应该怎么做？还是我错过任何常规约定？
另外，如果可以的话，请引导我进入一个易于理解的资源，以学习JQuery Selectors以及入门级人员将需要的诸如this refresh（）之类的其他东西。
感谢和问候
安朱姆
将项目动态添加到活动页面后，您需要通过调用小部件的name来手动增强（样式）元素.listview()。
$("[data-role=content]").append(html);
$("#list2").listview();
将li元素添加到现有列表视图时，需要refresh使用小部件。
$("#list2").append("<li>foo</li>").listview("refresh");
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句