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