Tự động thêm bộ có thể thu gọn và danh sách lồng nhau trong jQuery mobile

Tôi đang thêm một listview bên trong một collapsible động. Và bên trong danh sách đó tôi đang cố thêm một danh sách lồng nhau. Khi tôi nhấp vào nút <li>, sự kiện pageinit sẽ bị hủy thay vì sự kiện click. Sự kiện nhấp chuột được kích hoạt khi chúng tôi nhấp vào cùng một thời điểm li lần thứ hai.Tự động thêm bộ có thể thu gọn và danh sách lồng nhau trong 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'); 
});

Nguồn

2013-05-31 dejavu

Bạn phải sử dụng list.append("<li><a href=\"#\">Item</a></li>"); thay vì list.append("<li>Item</li>");.

Đã cập nhật jSFiddle here.

Ngoài ra, lưu ý rằng không nên sử dụng trình xử lý sẵn sàng tài liệu kết hợp với jQuery Mobile. Tôi sẽ đề nghị thêm một id trên trang jQM và sử dụng một trình xử lý sự kiện của sự kiện 'pagebeforeshow'.

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

Bạn có thể tìm thấy một jsFiddle trong đó bao gồm việc sửa chữa đề nghị here

Cuối cùng tôi muốn khuyên bạn nên tránh tạo ra phần năng động như thế. Bạn sẽ nhận ra rằng sau một thời gian, mã của bạn sẽ trở nên lộn xộn và khó đọc.

Đề xuất của tôi là sử dụng Undescore.js làm công cụ tạo mẫu và làm cho mã của bạn có thể sử dụng lại và làm sạch.

chỉnh sửa để thêm điều khiển vào các mặt hàng danh sách lồng nhau:

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

Tôi hy vọng điều này sẽ giúp.

Nguồn

2013-05-31 21:35:32

Nhưng danh sách lồng nhau thực sự hoạt động như thế nào? Khi chúng ta bấm vào một danh sách lồng nhau, một trang mới được tạo ra hoặc một cái gì đó khác xảy ra. Bởi vì sau khi tạo cấp độ lồng đầu tiên, trình xử lý sự kiện nhấp chuột không hoạt động trên các danh sách phụ. – dejavu

Nếu tôi hiểu rõ bạn muốn thêm một trình xử lý mới vào các danh sách cấp thứ hai (các mục thử nghiệm trong ví dụ cụ thể), phải không? –

Vâng, tôi muốn thêm một trình xử lý mới vào danh sách cấp hai. – dejavu

Tự động thêm bộ có thể thu gọn và danh sách lồng nhau trong jQuery mobile

Trả lời

Các vấn đề liên quan