使用javascript在div中添加div到phonegap

Question

我正在学习使用phonegap开发应用程序。我的问题是，在追加div的时候，它并不是应该显示的。

这里是我的代码

<div data-role="content" id="contenido"> 
    <div data-role="collapsible-set" id="tareas"> 

    <div data-role="collapsible" id="tarea_1">'+ 
     '<h3>Tarea 1</h3>'+ 
     '<a class="ui-btn-a ui-btn ui-btn-icon-right ui-icon-carat-r" data-form="ui-btn-up-a" data-swatch="a" data-theme="a" href="#">Descripcion</a>  </div> 

    </div>    
</div> 

这种可折叠的“tarea_1”的一部分，如果我将其添加到它会出现这样的HTML。

但是，当我使用此代码追加它：

$('#tareas').append('<div data-role="collapsible" id="tarea_1">'+ 
     '<h3>Tarea 1</h3>'+ 
     '<a class="ui-btn-a ui-btn ui-btn-icon-right ui-icon-carat-r" data-form="ui-btn-up-a" data-swatch="a" data-theme="a" href="#">Descripcion</a>   </div>').listview('refresh'); 

这是我得到

我认为这是因为刷新的，但我不知道如何解决它

Answer 1

您需要使用“.collapsibleset（'refresh'）;”而不是 “.listview（ '刷新'）”

见这个例子for Jquery Mobile

工作Plunkr

$('document').ready(function(){ 
    $('#tareas').append("<div data-role='collapsible' id='tarea1'><h3>Tarea 1</h3></div>").collapsibleset('refresh'); 
});