在Javascript中使用JQueryMobile向列表添加项目

Adding Items to the List Using JQuery Mobile in Javascript

本文关键字：列表 添加 项目 JQueryMobile Javascript      更新时间：2023-09-26

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

有人能帮帮我吗。

谢谢&问候

AR

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

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

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和其他东西，比如入门级人员需要的refresh（）。

谢谢&问候

Anjum

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

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

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

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

演示

相关文章：