Javascript 从循环动态填充可折叠DIV的列表

我试图在页面中动态添加一个带有JQuery mobile CSS的可折叠DIV。DIV列表和相关内容填充在for循环中

items.forEach(function (entity) {
  document.getElementById("auditListHolder").innerHTML = document.getElementById("auditListHolder").innerHTML +
    "<div data-role='collapsible' data-collapsed='false'>" +
    "<h3>" + entity.AuditName + "</h3>" +
    "<p>" + entity.Content + "</p>" +
    "</div>";
});

items.forEach（函数（实体）{
document.getElementById（“auditListHolder”）.innerHTML=document.getElementById（“auditListHolder”）.innerHTML+
"" +
“”+entity.AuditName+“”+
“”+实体.内容+”
”+
"";
});

我尝试使用此代码在循环的每次迭代中将一个DIV添加到现有的DIV集合中，但该DIV不会呈现为可折叠DIV。该列表显示为普通DIV，其内容如下所示：

---

代码是否有问题，或者CSS是否有问题。

尝试在循环后调用元素auditListHolder上的.trigger（“create”）

调用小部件增强功能

.collapsable（）

$('selector').collapsible();

选择器=
[数据角色=可折叠]
，
#id
，
.class
等

循环结束后，添加
$（'[data role=collapsable'）.collapsable（）；
@Omar它工作了…感谢添加'$（'[data role=collapsable'）。collapsable（）；'解决了问题@Ricky