Javascript 在jQuery mobile中将列表动态添加到嵌套列表_Javascript_Jquery_Jquery Mobile

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

javascript jquery jquery-mobile

Javascript 在jQuery mobile中将列表动态添加到嵌套列表,javascript,jquery,jquery-mobile,Javascript,Jquery,Jquery Mobile,在用户单击li后，我试图将列表添加到中。正在添加列表，但列表未在新页面上打开。请参见jQuery移动站点上的示例。当您单击列表节点时，子列表将在一个新页面中打开（类似于）。我希望在动态添加列表时使用相同的功能这是我的密码。当您单击一个时，它将添加新列表，但方式与jQuery移动站点中显示的方式不同如何实现此功能？否则，动态添加嵌套列表的首选方法是什么编辑：此问题已通过刷新列表视图解决。现在，我在可动态折叠文件中添加了一个listview。但在该列表中，当我单击一个时，pageinit事件被

在用户单击

li

后，我试图将列表添加到

中。正在添加列表，但列表未在新页面上打开。请参见

jQuery

移动站点上的示例。当您单击

列表

节点时，子列表将在一个新页面中打开（类似于）。我希望在动态添加列表时使用相同的功能

这是我的密码。当您单击一个

时，它将添加新列表，但方式与jQuery移动站点中显示的方式不同

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

编辑：此问题已通过刷新列表视图解决。现在，我在可动态折叠文件中添加了一个listview。但在该列表中，当我单击一个

时，

pageinit

事件被触发，而不是

click

事件。当我们第二次单击相同的

li

时，将触发click事件

更新的代码：

我已经更新了您的JSFIDLE示例，使其能够工作。检查JSFIDLE示例


jQuery移动嵌套列表
$（document）.on（'click'，'#list li'，function（）{
$（此）。附加（“子类别1”子类别”）测试1”>测试2子类别2>子类别测试1
”>测试2

我希望这会有所帮助

，但它不会动态添加子列表。我希望在用户单击父列表时添加子列表。请参阅问题中我的JSFIDLE，我更新了答案。选择类别1。在脚本中，您应该放置填充嵌套列表的代码。我已经更新了我的答案。你能解释一下这个代码中的问题是什么吗？我在可动态折叠文件中添加了一个listview。但在该列表中，当我单击一个

时，pageinit事件将被触发，而不是单击事件。当我们第二次单击同一个li时，将触发click事件。代码：您应该创建一个新问题。最初的问题已经解决了。。现在您已经更改了问题描述的上下文。

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