Question

我尝试在用户点击<li>后向li添加列表。正在添加列表，但列表未在新页面上打开。请参阅jQuery移动网站上的nested list示例。单击list节点时，子列表将在新页面中打开（种类）。我想在动态添加列表时使用相同的功能。

这是我的代码http://jsfiddle.net/f869z/。当您单击<li>时，它会添加新列表但不会与jQuery移动站点中显示的方式相同。

如何实现此功能？否则，动态添加嵌套列表的首选方法是什么。

编辑：刷新列表视图已解决此问题。现在我在动态可折叠中添加listview。但是在该列表中，当我点击<li>时，pageinit事件被触发而不是click事件。当我们第二次点击相同的li时，点击事件就会被触发。

更新了代码：http://jsfiddle.net/5zJC5/

Answer 1

我更新了你的jsfiddle示例，以便它可以工作。检查jsFiddle示例here

<!DOCTYPE html>
<html>

    <head>
        <title>jQuery Mobile Nested List</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
        <script>
            $(document).on('click', '#list li', function() {    
                $(this).append("<ul><li>Subcategory 1 <ul> <li data-role=\"list-divider\">Sub category</li> <li data-icon=\"false\">Test 1</li> <li data-icon=\"false\">Test 2</li> </ul> </li> <li>Subcategory 2 <ul> <li data-role=\"list-divider\">Sub category</li> <li data-icon=\"false\">Test 1</li> <li data-icon=\"false\">Test 2</li> </ul> </li></ul>").parent().listview('refresh');
            });
        </script>
    </head>

    <body>
        <div id="list-page" data-role="page">
            <div data-role="header">
                 <h1>Nested List Page</h1>

            </div>
            <div data-role="content">
                <div data-role="collapsible-set" data-theme="b" data-content-theme="d">
                    <div data-role="collapsible">
                        <h3 data-position="inline">Filtered list<h3>
                        <ul data-role="listview" data-divider-theme="d" id="list">
                            <li><a href="#">Adam Kinkaid</a></li>
                            <li><a href="#">Alex Wickerham</a></li>
                            <li><a href="#">Avery Johnson</a></li>
                            <li><a href="#">Bob Cabot</a></li>
                            <li><a href="#">Caleb Booth</a></li>
                        </ul> 
                    </div> 
                </div> 
            </div> 
        </div>
    </body>

</html>

我希望这会有所帮助

将列表动态添加到jQuery mobile中的嵌套列表中

1 个答案: