爲什麼我的元素顯示沒有風格？

Question

我最近開始創建一個帶有phonegap和jquery mobile的應用程序，該應用程序加載一個json並創建一個元素，這是我的代碼。

<script type="text/javascript"> 
      $(document).ready(function(){ 
       $("#boton").click(function(){ 
        $.getJSON("json url",function(data){ 
         var instrucciones = data.Instrucciones; 
         document.getElementById("titulos").innerHTML = instrucciones; 
         var acordeonJSON = $('<div data-role="collapsible" id="accordeon"><h3>hi</h3><p>Hello</p></div>'); 
         $.each(data.Items,function(llave,valor){ 
          if(valor.nombreItem !="") 
          { 
           $("#accordeon").append(acordeonJSON); 
          } 
         }); 
        });//Llave getJSON 
       });//Llave boton click 
      }); 

     </script> 

這是我的HTML結構

<div data-role="page" id="home"> 
     <div data-role="header" id="titulo"> 
      <h1 id="titulos"></h1> 
     </div> 

     <div data-role="main" class="ui-content" id="div1"> 
      <button id="boton">Presioname</button> 
      <div id="instrucciones"></div> 

      <div data-role="collapsible-set" data-theme="c" id="accordeon"> 
       <!--In this part i want to show the content of my json--> 
      </div> 
     </div> 

     <div data-role="footer" data-position="fixed"> 
      <h1>Footer</h1> 
     </div> 
</div> 

我的問題是，爲什麼我不能創建我的jQuery中的元素，將創建的元素顯示了沒有風格。

Answer 1

追加collapsibleset內的所有新的DOM元素之後，調用$("#accordeon").collapsibleset("refresh").enhanceWithin();

例如：

$("#boton").click(function(){ 
    var acordeonJSON = $('<div data-role="collapsible" id="accordeon1"><h3>hi</h3><p>Hello</p></div>'); 
    $("#accordeon").append(acordeonJSON).collapsibleset("refresh").enhanceWithin(); 
}); 

這裏是一個DEMO