通过格式化将jquery移动组件动态添加到列表视图中

当我动态插入以下代码时，我可以强制刷新页面，以便它应用jQuery移动格式
由于某些原因，它不允许我设置按钮格式。这真的很奇怪，因为它允许动态插入列表和按钮，但除了名称之外，我似乎无法格式化按钮
它可以通过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");

jQuery Mobile Doc提到，如果向列表中添加或删除了新的列表项，则分隔符不会自动更新，您应该在listview上调用refresh（）来重新绘制自动分隔符。

请在填充列表后尝试添加：$('#cartList').listview('refresh');。

示例：

<!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>

相关内容

最新更新

热门标签：