use*_*129 2 javascript jquery html5 jquery-mobile
在使用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>
首先,你把你的<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页面的最后一节介绍了此功能.
这里的工作示例:http://jsbin.com/omepob/1/
| 归档时间： |
|
| 查看次数： |
5999 次 |
| 最近记录： |