Динамически загружаемый складной набор в JQuery Mobile

Question

Я пытаюсь динамически загружать вложенный складной набор с использованием ajax-вызова в JQuery Mobile. По какой-то причине сворачиваемый div заканчивается тем же самым уровнем; не иерархическая или вложенная.

Вот код:

$('#pp-home').live("pageinit", function(){ 
     //Get Colleges 
     $.ajax({url: "parent.php?action=xyz", 
      success:function(data){ 
       $(data).find('college').each(function(){ 
        $('#colleges_div').append(
         "<div id='col_"+$(this).attr('id')+"' data-role='collapsible' data-theme='c'>"+ 
          "<h3>"+$(this).text()+"</h3><p>ssss</p>"+ 
         "</div>" 
        ); 
        //Get data 
        $.ajax({url:"children.php?action=xyz", 
         success:function(data){ 
          $(data).find('dept').each(function(){ 
           $("#col_"+$(this).attr('cid')).append(
            "<div data-role='collapsible' data-theme='a' data-mini='true'>"+ 
             "<h3>"+$(this).text()+"</h3><p>ssss</p>"+ 
            "<div>" 
           ); 
          $("#col_"+$(this).attr('cid')).trigger('create'); 
          }); 
         } 
        }); 
       }); 
       $('#colleges_div').trigger('create'); 
      } 
     });  
    }); 

Answer 1

Метода складных Материалов являются:

$(".selector").trigger("collapse"); 
$(".selector").trigger("expand"); 

Смотреть еще: http://jquerymobile.com/demos/1.2.0/docs/content/content-collapsible.html

Для складного-набора, у вас есть:

$(".selector").collapsibleset("refresh"); 

См Подробнее: http://jquerymobile.com/demos/1.2.0/docs/content/content-collapsible-set.html

Я нахожусь в подобной лодке, в настоящее время, но пытаются гнездиться в collapsiuble список в складном наборе: http://jsfiddle.net/MqDFt/3/

Глядя на то, что может быть в результате, как HTML, я думаю, вам не хватает родитель, который определяется как сбрасываемый набор. Формат должен быть:.

<div data-role="collapsible-set" id="parent1"> 
    <div data-role="collapsible" id="child1"> 
    <h3>Header Title 1</h3> 
    <p>ssss</p> 
    </div> 
    <div data-role="collapsible" id="child2"> 
    <h3>Header Title 2</h3> 
    <p>ssss</p> 
    </div> 
</div> 

Тогда при вызове $ ("# Parent1") collapsibleset ("обновить"), он должен отображаться правильно.