2

在使用 jQuery Mobile<ul data-role="listview">时，我试图<li>从 JavaScript 添加一些 s，但新<li>的没有继承 jQuery Mobile 样式。这是代码：

<head>
  <script>
    function init()
    {
      msg = "<li> <a href=> New List Item </a></li>";
      document.querySelector('#add_item').innerHTML +=  msg;
    }

    // call init on load
    window.addEventListener('load',init,false);
  </script>
</head>

<body>
  <div id='main' data-role='page' data-theme='c'>
    <div data-role='header'>
      <h1>Welcome!</h1>
    </div>
    <div id='content' data-role='content'>
      <ul data-role="listview" id="list_cars">
        <div id="add_item">
        </div>

        <li> <a href=""> List Item 1</a></li>
        <li> <a href=""> List Item 1</a></li>      
      </ul>
    </div>
    <div data-role='footer'>
      <h4>Enjoy reading the book ...</h4>
    </div>
  </div>  <!-- End of Min page -->
</body>
4

2 回答 2

5

首先，您将您的<li>内部放入 a<div>而不是直接放入<ul>. 尝试将您的 querySelector 更改为...

document.querySelector('#list_cars').innerHTML +=  msg;

或者，如果您希望该项目位于列表顶部，请使用此...

document.querySelector('#list_cars').innerHTML = msg + document.querySelector('#list_cars').innerHTML;

然后，您需要告诉 jQuery Mobile 通过添加...来更新该列表视图。

$('#list_cars').listview('refresh');

这个jQuery Mobile 文档页面上关于列表的最后一节描述了这个特性。

这里的工作示例：http: //jsbin.com/omepob/1/

于 2013-04-08T18:10:39.530 回答
2

要将属性应用到新对象上，最佳方法是为对象调用 jQuery 的刷新方法：

$("#myobject").listview("refresh");

但是，我鼓励您将这个 innerHTML 调用替换为更符合 DOM 的东西，例如：

var myli = document.createElement("li");
myli.appendChild(document.createTextElement("List Item 3"));

顺便说一句，同意特拉维斯；最好包含一个“ul”作为“li”的父级，而不是在那里使用“div”......

于 2013-07-23T14:43:10.247 回答