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

【问题标题】：Adding Items to the List Using JQuery Mobile in Javascript在 Javascript 中使用 JQuery Mobile 将项目添加到列表
【发布时间】：2013-12-14 22:29:30
【问题描述】：

我是 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(){} 并调用该函数以将动态项附加到下拉列表中，则附加项的格式不正确并显示为简单文本。

澄清一下，如果我只是修改以下行：

  <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);
}

谁能帮帮我。

感谢和问候

增强现实

======编辑========= 谢谢奥马尔！这真的很有帮助。

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

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 选择器和其他类似 refresh() 的东西，这是入门级人员需要的。

感谢和问候

安杰姆

【问题讨论】：

JQM 处理 DOM 就绪调用的方式与 jQuery 不同 - 您需要绑定到其他事件，例如 pageinit - 请参见此处：api.jquerymobile.com/pageinit

标签： javascript jquery jquery-mobile mobile

【解决方案1】：

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

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

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

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

Demo

【讨论】：