在 jQuery mobile 中动态添加可折叠集和嵌套列表答案

【问题标题】：Dynamically adding collapsible set and nested list in jQuery mobile在 jQuery mobile 中动态添加可折叠集和嵌套列表
【发布时间】：2013-05-31 21:14:48
【问题描述】：

我在collapsible 中动态添加listview。在该列表中，我试图添加一个嵌套列表。当我单击<li> 节点时，pageinit 事件被触发而不是click 事件。当我们第二次点击相同的li 时，点击事件被触发。

jsFiddle - http://jsfiddle.net/5zJC5/

HTML：

<body>
<div data-role="page">
    <div data-role="collapsible-set" data-theme="b" data-content-theme="d" id="mainColl"></div>         
</div>
</body>

jQuery:

$(document).ready(function () {
      var ul=$("#mainColl");
      var collapsible= $('<div data-role="collapsible">');
      collapsible.append('<h2>Collapsible</h2>');

      var list = $('<ul data-role="listview" data-divider-theme="b">');
      list.append('<li data-role="list-divider">List</li>');

      for(var j =0;j<4;j++) {
        list.append("<li>Item</li>");
      }
      collapsible.append(list);
      ul.append(collapsible);
      ul.trigger('create');
});

$("#mainColl").on("click","li",function() {
      var list = $("<ul>");
      for(var i=0;i<4;i++) {
        list.append("<li>test</li>");
      }
      $(this).append(list);
      //$(this).trigger('create');
      $(this).parent().listview('refresh');
});

【问题讨论】：

标签： javascript jquery jquery-mobile

【解决方案1】：

您必须使用list.append("<li><a href=\"#\">Item</a></li>"); 而不是list.append("<li>Item</li>");。

更新了 jSFiddle here。

另外，请注意不建议将文档就绪处理程序与 jQuery Mobile 结合使用。我建议在 jQM 页面上添加一个 id 并使用“pagebeforeshow”事件的事件处理程序。

$(document).on('pagebeforeshow', '#page-id', function(){...mycode...});

您可以找到一个 jsFiddle，其中包含建议的修复 here

最后我想建议你避免创建这样的动态部分。您会意识到，一段时间后您的代码会变得凌乱且难以阅读。

我的建议是使用Undescore.js 作为模板引擎，让你的代码可重用和干净。

已编辑以在嵌套列表项上添加处理程序：

<!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('pagebeforeshow', '#home-page', function () 
             {
                var collapsibleSet=$("#mainColl");
                var collapsible= $('<div data-role="collapsible"></div>');
                collapsible.append('<h2>Collapsible</h2>');

                var list = $('<ul data-role="listview" data-divider-theme="b"></ul>');
                list.append('<li data-role="list-divider">List</li>');

                for(var j =0;j<4;j++)
                {
                    list.append("<li><a href=\"#\">Item</a></li>");
                }
                collapsible.append(list);
                collapsibleSet.append(collapsible);
                collapsibleSet.trigger('create');
             });


            $(document).on("click","#mainColl li",function()
            {
                var list = $("<ul id=\"second-list\"></ul>");
                for(var i=0; i<4; i++)
                {
                    var listItem = $("<li id=\"list-" + i + "\"><a href=\"#\">Test</a></li>").on('click', function(){alert(this.id)})
                    list.append(listItem);
                }
                $(this).append(list);
                $(this).parent().listview('refresh');
            });
        </script>
    </head>

    <body>
        <div data-role="page" id="home-page">
               <div data-role="content">
                   <div data-role="collapsible-set" data-theme="b" data-content-theme="d" id="mainColl">
                   </div>
               </div>
        </div>
     </body>

</html>

我希望这会有所帮助。

【讨论】：

但是嵌套列表实际上是如何工作的呢？当我们单击嵌套列表时，会创建一个新页面或发生其他事情。因为在创建了第一级嵌套之后，click事件处理函数对子列表不起作用。
如果我理解你想在二级列表中添加一个新的处理程序（具体示例中的测试项），对吧？
是的，我想在二级列表中添加一个新的处理程序。
但是我在页面加载后使用 AJAX 检索数据，那么动态添加列表的最佳方式应该是什么？
请查看我更新的答案。我在嵌套列表项上添加了处理程序。根据下划线js作为模板引擎的用法，查看这个例子：islandsmooth.com/2011/08/…