Javascript JQuery移动数据角色不'；不适用于div

我对JQuery和Javascript都是新手。我有一个XML文件，其中存储了一些产品，我想在可折叠的div中显示这些产品作为可折叠的div。我有以下Javascript文件：

$(document).ready(function()
{
$.ajax({
type: "GET",
url: "producten.xml",
dataType: "xml",
success: parseXml
});
});

function parseXml(xml)
{
var container = document.getElementById("behuizingen");
$(xml).find("behuizing").each(function()
{
var release = document.createElement("div");
release.setAttribute('data-role', 'collapsible');
release.innerHTML = "<h3>" + $(this).find('naam').text() + "</h3>";
container.appendChild(release);
 });
}

$（文档）.ready（函数（）
{
$.ajax({
键入：“获取”，
url:“producten.xml”，
数据类型：“xml”，
成功：parseXml
});
});
函数解析xml（xml）
{
var container=document.getElementById（“behuizingen”）；
$（xml）.find（“behuizing”）.each（function（）
{
var release=document.createElement（“div”）；
setAttribute（'data-role'，'collapsable'）；
release.innerHTML=“+$（this）.find（'naam'）.text（）+”；
容器。子容器（释放）；
});
}

这应该获取我的所有产品名称并将它们放在可折叠div中，它确实可以这样做，但它将名称显示为纯HTML文本，而不是JQuery Mobile可折叠div。这些是我在HTML文件中的导入：

<link rel="stylesheet" href="jquery.mobile-1.2.0/jquery.mobile.structure-1.2.0.css" />

<link rel="stylesheet" href="jquery.mobile-1.2.0/jquery.mobile-1.2.0.css" />

<link rel="stylesheet" href="styles/style.css" />

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

<script src="jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>

<script src="styles/winkel.js"></script>

---

还有一件事，它不会显示产品。如果我从主页开始导航到显示产品的页面，我必须刷新（ctrl+f5）才能显示。如果有人能帮我解决这个问题，我将不胜感激，因为我不知道如何修复它。

当你在页面初始化后通过ajax附加一个jquery移动小部件时，你必须触发（“创建”）。即

为了更好地理解，请学习文档

$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );