Question

在使用jQuery Mobile <ul data-role="listview">时，我尝试从JavaScript添加一些<li>，但新的<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>

Answer 1

首先，您将<li>放在<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 Documentation page about lists的最后一部分介绍了此功能。

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

Answer 2

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

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

但是，我鼓励您将此innerHTML调用替换为更多DOM-atic，例如：

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

BTW同意Travis的意见;最好包括“ul”作为“li”的父级，而不是在那里使用“div”......

在jQuery Mobile data-role = listview </li>中动态填充<li>

2 个答案: