在jQuery mobile中动态添加可折叠设置和嵌套列表

我在collapsible内动态添加listview。并在该列表中，我试图添加一个嵌套列表。当我点击<li>节点时，pageinit事件正在被解雇，而不是click事件。当我们点击第二次点击相同的li时，点击事件被激发。在jQuery mobile中动态添加可折叠设置和嵌套列表

的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'); 
});

来源

2013-05-31 dejavu

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

更新jSFiddle here。

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

你可以找到的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>

我希望这有助于。

来源

2013-05-31 21:35:32

但是，嵌套列表如何实际工作？当我们点击嵌套列表时，会创建一个新页面或发生其他事情。因为在创建第一级嵌套之后，click事件处理程序不能在子列表上工作。 – dejavu

如果我理解的很好，你想添加一个新的处理程序在二级列表（具体例子中的测试项目），对吧？ –

是的，我想添加一个新的处理程序到二级列表。 – dejavu

在jQuery mobile中动态添加可折叠设置和嵌套列表

回答

相关问题