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

运行结果：