Dynamiczne dodawanie zestawu zwijanego i listy zagnieżdżonej w aplikacji jQuery mobile

Dodaję dynamicznie listview wewnątrz collapsible. I na tej liście próbuję dodać listę zagnieżdżoną. Kiedy klikam w węźle <li>, wydarzenie zostanie wydane pageinit zamiast zdarzenia click. Zdarzenie kliknięcia jest uruchamiane, gdy ponownie klikniemy ten sam numer li.Dynamiczne dodawanie zestawu zwijanego i listy zagnieżdżonej w aplikacji 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'); 
});

Źródło

2013-05-31 dejavu

Musisz użyć list.append("<li><a href=\"#\">Item</a></li>"); zamiast list.append("<li>Item</li>");.

Zaktualizowany jSFiddle here.

Należy również pamiętać, że nie zaleca się używania procedury obsługi dokumentu w połączeniu z jQuery Mobile. Proponuję dodać identyfikator na stronie jQM i użyć obsługi zdarzeń zdarzenia "pagebeforeshow".

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

można znaleźć jsFiddle który zawiera sugerowaną poprawkę here

Na koniec chciałbym zaproponować Ci uniknąć tworzenia dynamicznych elementów w tym stylu. Zrozumiesz, że po pewnym czasie twój kod stanie się brudny i trudny do odczytania.

Moja propozycja polega na użyciu Undescore.js jako silnika szablonów i sprawieniu, że kod będzie ponownie używany i czysty.

edytowane dodać obsługi na zagnieżdżonych elementów listy:

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

Mam nadzieję, że to pomaga.

Źródło

2013-05-31 21:35:32

Ale jak działa zagnieżdżona lista? Kiedy klikamy na listę zagnieżdżoną, tworzymy nową stronę lub dzieje się coś innego. Ponieważ po utworzeniu pierwszego poziomu zagnieżdżania funkcja obsługi zdarzeń kliknięcia nie działa na podrzędnych listach. – dejavu

Jeśli dobrze rozumiem, chcesz dodać nową procedurę obsługi na listach drugiego poziomu (testuj elementy w konkretnym przykładzie), prawda? –

Tak, chcę dodać nowy program obsługi do listy drugiego poziomu. – dejavu

Dynamiczne dodawanie zestawu zwijanego i listy zagnieżdżonej w aplikacji jQuery mobile

Odpowiedz

Powiązane problemy