在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中動態添加可摺疊設置和嵌套列表

回答

相關問題