Question

我是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>

如果我将Script部分移动到一个函数中，Say 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);
}

有人可以帮帮我吗。

谢谢＆amp;此致

AR

====== EDIT ========= 谢谢奥马尔！这真的很有用。

由于我打算动态创建一个多级列表，我已经更改了下面的函数，以便递归调用下一级菜单：

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选择器和其他类似刷新（）的东西，这是入门级人员所需要的。

谢谢＆amp;此致

Anjum

Answer 1

将项目动态追加到活动页面后，您需要通过调用窗口小部件的名称.listview()来手动增强（样式）元素。

$("[data-role=content]").append(html);
$("#list2").listview();

将li元素添加到现有列表视图时，您需要refresh小部件。

$("#list2").append("<li>foo</li>").listview("refresh");

<强> Demo

在Javascript中使用JQuery Mobile将项添加到列表中

1 个答案: