0

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

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

我怎样才能实现这个功能？否则动态添加嵌套列表的首选方法是什么。

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

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

4

1 回答 1

0

我已经更新了您的 jsfiddle 示例，以便它可以正常工作。在此处检查 jsFiddle 示例

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

我希望这有帮助

于 2013-05-31T17:52:25.460 回答