JQuery Mobile：動態可摺疊不起作用

Question

我有一個可摺疊列表，我用一些撥動開關動態更改。我遇到的問題是，當切換開關打開並且我必須追加可摺疊元素時，效果不佳，並且該元素不能作爲可摺疊列表中的可摺疊元素插入。這裏是代碼和圖像，你可以看到如何可摺疊列表的第一個元素是好的，但如果我想添加另一個，那一個是不行的。 鏈接到圖片：image of the problem

，代碼：

HTML：

<div data-role="page" id="ejercicios"> 
<div data-theme="a" data-role="header"> 
    <a data-role="button" data-inline="true" data-theme="a" data-transition="slideup" 
    href="#principal" data-icon="home" data-iconpos="left" class="ui-btn-left"> 
    Volver 
    </a> 
    <h3 id="nombreAplicacion"> 
     Nombre Aplicacion 
    </h3> 
</div> 
<div data-role="content"> 
    <h4 id="tituloEjercicios"> 
     Ejercicios 
    </h4> 
    <a id="botonAgregarQuitarEjercicio" data-role="button" data-direction="reverse" 
    data-transition="slideup" data-theme="a" href="#activarEjercicios" data-icon="plus" 
    data-iconpos="left"> 
     Agregar/Quitar Ejercicios 
    </a> 
    <div id="colapsables" data-role="collapsible-set" data-theme="a" data-content-theme="a"> 
     <div data-role="collapsible" data-collapsed="false" id="Ejercicio1"> 
      <h3> 
       Ejercicio #1 
      </h3> 
      <div data-role="fieldcontain"> 
       <textarea name="textoColapsable" id="textoColapsable" placeholder="" data-mini="true">Acá va todo el texto sobre el ejercicios, que es lo que hay que hacer con todos los pasos y esas cosas, este texto es a modo de prueba</textarea> 
      </div> 
      <div data-role="fieldcontain"> 
       <label for="ejercicioValor"> 
        Valor 1 
       </label> 
       <input name="Valor 1" id="ejercicioValor" placeholder="Ingrese el valor" 
       value="" type="text" data-mini="true"> 
      </div> 
      <input id="botonGuardarEjercicio1" type="submit" data-theme="a" data-icon="edit" 
      data-iconpos="left" value="Guardar" data-mini="true"> 
     </div> 
    </div> 
</div> 

的javascrip：

if(valor1 == "on") 
    { 

     $('#colapsables').append($('<div/>') 
              .attr("data-role", "collapsible") 
              .attr("data-collapsed", "false") 
              .attr("id", "Ejercicio1") 
              .append($('<h3/>').text("Ejercicio #1")) 
              .append($('<div/>') 
                   .attr("data-role","fieldcontain") 
                   .append($('<textarea/>') 
                         .attr("name","textoColapsable") 
                         .attr("id","textoColapsable") 
                         .attr("placeholder","") 
                         .attr("data-mini","true") 
                         .text("aca va algo de texto") 
                     ) 
                ) 
              .append($('<div/>') 
                   .attr("data-role","fieldcontain") 
                   .append($('<label/>') 
                        .attr("for","ejercicioValor") 
                        .text("Valor 1") 
                    ) 
                   .append($('<input/>') 
                        .attr("name","Valor 1") 
                        .attr("id","ejercicioValor") 
                        .attr("placeholder","Ingrese el Valor") 
                        .attr("value","") 
                        .attr("type","text") 
                        .attr("data-mini","true") 
                    ) 
                ) 
              .append($('<input/>') 
                   .attr("id","botonGuardarEjercicio1") 
                   .attr("type","submit") 
                   .attr("data-theme","a") 
                   .attr("data-icon","edit") 
                   .attr("data-iconpos","left") 
                   .attr("value","Guardar") 
                   .attr("data-mini","true") 
                ) 

              ); 


     //ESTA FUNCIONANDO MAL ESTO 
    } 
    else 
    { 
     $("#Ejercicio1").remove(); 
    } 

Answer 1

在.append的末尾加上.trigger('create')，如下面的演示。

Demo