jQuery Mobile中动态添加列表项

Question

我在使用jQuery mobile时遇到了一些动态添加列表项的问题。基本上，我希望用户在文本框中输入的任何内容都可以添加到列表中。我有以下代码，但无法弄清楚为什么期望的输出没有出现。

<script>
  var listCreated = false;
  function appendToList() {
    if(!listCreated) {
      $("#items").append("<ul id='list' data-role='listview' data-inset='true'></ul>");
      listCreated = true;
      $("#items").trigger("create");
    }
    $("#list").append("<li>");
    $("#list").append(document.getElementById(item).value);
    $("#list").append("</li>");
    $("#list").listview("refresh");
  }
</script>
<div data-role="content">
  <div id="items"></div>
  <input type="text" id="item" />
  <input type="button" value="Add item to list" onclick="appendToList()"/>
</div>

- Chris

Answer 1

尝试创建整个li，然后再附加到列表中。目前，您是将开放的<li>附加到列表中，然后将值附加到列表中，而不是新的li。请注意保留HTML标记。

var value = $("#item").val();
var listItem = "<li>" + value + "</li>";
$("#list").append(listItem);

Demo: http://jsfiddle.net/DVbGY/1/

- tymeJV

---

那个完美地运行了！非常感谢，我没有看到这个疏忽。 - Chris