Jquery mobile动态加载渲染失效

1.可折叠块

按照w3school 教程块的说法如下：

可折叠的内容块

可折叠（Collapsibles）允许您隐藏或显示内容 - 对于存储部分信息很有用。

如需创建可折叠的内容块，请向某个容器分配 data-role="collapsible" 属性。在容器（div）中，添加一个标题元素（h1-h6），其后是您需要扩展的任意 HTML 标记：

实例

<div data-role="collapsible"> <h1>点击我 - 我可以折叠！</h1> <p>我是可折叠的内容。</p> </div>

亲自试一试

默认地，该内容是关闭的。如需在页面加载时扩展内容，请使用 data-collapsed="false"：

.......................略。  但仅按以上几个属性动态生成出来的折叠块无法完成渲染，无法达到预想的效果 解决方案： js $("#showProductInfo_div div:gt(0)").remove(); var width = $(window).width()/3.9 $.each(data.myProductList,function(i,v){ var content = "<div style='width: 98%;' data-role='collapsible'><h3 width='96%' style='margin-left: 2%;'>产品名称   <span style='float:right;padding-right:2%;'>移除</span></h3>" +"正文部分</div>"; $("#showProductInfo_div:last").append(content).collapsibleset( "refresh" ); }); html <div id="showProductInfo_div" data-role="collapsibleset" data-content-theme="a" data-iconpos="right"> <div style="width: 98%" data-role="collapsible"> <h3 style="margin-left: 2%;">产品名称   <span style="float:right;padding-right:2%;">移除</span></h3> </div> </div> 实测可行，区别主要在于html div标签中声明了data-role="collapsibleset" 属性，在js动态append后 .collapsibleset( "refresh" );  渲染方法.. 注意，在此前js等一些文件勿忘记引入. 资料来源： http://demos.jquerymobile.com/1.4.5/collapsible-dynamic/#&ui-state=dialog

2.表单动态加载后渲染

这个比较简单，在append后增加一个  .trigger("create"); 即可重新渲染， 如：$("#showProductInfo_div:last")append(content).trigger("create");  资料来源： https://my.oschina.net/768272516/blog/36960 运行结果：