Question

我正在尝试让jQuery（移动版）向<li>添加新的<ul>元素，其中数据角色设置为“listview”

这是html：

    <div data-role="page">

   <header data-role="header">  
    <h1>Header</h1>
   </header>  

   <div data-role="content">  
    <ul data-role="listview" data-theme="a" id="sitelist">
        <li><a href="page1.html" data-transition="pop">Page1</a></li>
    </ul>
   </div>  

   <footer data-role="footer">  
    <h4>Footer text</h4>
   </footer>  

</div>

这是使用的javascript：

$('ul').append('<li><a href="#">sada</a></li> ');

$('ul').listview('refresh');

但问题是输出呈现为： http://www.dumblegroup.com/Capture.png

我希望“sada”项目只渲染一次，它的格式应与“Page1”相同。

我做错了什么？感谢任何帮助！

/马格努斯

Answer 1

我没有做过很多关于jQuery mobile的工作，但我认为数据转换属性是必不可少的。尝试在您添加的链接中进行设置。

Answer 2

当我第一次尝试使用XHR移动使用XHR来获取某些数据时，我遇到了一个非常类似的问题。 Listview看起来非常挑剔，我发现让它工作的最简单方法是在我的代码中创建UL（不在HTML页面中），在附加我的LI后，我在新创建的UL上调用了listview（）。

所以基本上尝试声明你的UL（在html中）没有 data-role 属性，使用js添加你的LI元素和然后在UL上调用listview（）。

例如

$('#sitelist').append(data);
...
$('#sitelist').listview()

Answer 3

我做到了这一点：

var myList = $("#theList");
myList.listview('refresh');

并且正常工作

如何使用jQuery（mobile）动态添加<li>元素作为listview </li>

3 个答案: