动态将jquery移动组件添加到具有格式的listview
[英]Dynamically add jquery mobile components to listview with formatting
问题描述
When I'm dynamically inserting the following code, I can force the page to refresh so it applies the jQuery mobile formatting. 
当我动态插入以下代码时，我可以强制页面刷新，以便它应用jQuery移动格式。
For some reason its doesn't allow me to set the button formatting. 由于某种原因，它不允许我设置按钮格式。 Its really odd, because it allows the list to be dynamically inserted and the button, but i cant seem to format the button except for the name. 它真的很奇怪，因为它允许动态插入列表和按钮，但是我似乎无法格式化按钮的名称。
It can be manipulated via CSS but I want to use the jQuery API . 可以通过CSS进行操作，但我想使用jQuery API 。
$('#cartList').append('<li>'
+ '<h3>' + game.Title+'</h3>'
+ '<p>' + '£' + game.Price + '</p>'
+ '<a href="#cartList" data-role="button" data-icon="none" data-inline="true" onclick="removeItem()">Remove</a>'
+ '<h3 class="ui-li-aside">' + game.Format + '</h3>'
+ '</li>').trigger("create");
1 个解决方案
解决方案1
1 2012-08-28 20:43:31
The jQuery Mobile Doc mentions that if new list items are added to the list or removed from it, the dividers are not automatically updated and you should call refresh() on the listview to redraw the autodividers. jQuery Mobile Doc提到，如果将新列表项添加到列表中或从列表中删除，则分隔线不会自动更新，您应该在listview上调用refresh（）重新绘制自动分隔线。
Try to add: $('#cartList').listview('refresh'); 尝试添加： $('#cartList').listview('refresh'); after you have populated the list. 在您填充列表之后。
Example: 例：
<!doctype html>
<html lang="en">
<head>
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script>
$(document).ready(function(){
$("#add-li-button").click(function(){
$('#listList').append("<li data-role=\"collapsible\"> <h3>New List</h3> <div data-role=\"fieldcontain\"></div> </li>").listview("refresh");
});
});
</script>
</head>
<body>
<div data-role="page" id="page">
<ul id="listList" data-role="listview">
</ul>
<input type="button" id="add-li-button" value="add a checkbox to list1" />
</div>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.