Javascript 最后得到了可折叠的样式以应用于XML生成的数据，但数据图标不适用

使用此代码/方法，我终于获得了JQuery Mobile可折叠样式，可以应用于从XML文件中提取的数据——但我无法让所有JQuery样式都工作，例如图标，它不工作。例如，我希望将数据折叠图标设置为arrow-u。这在静态代码中有效，但在动态处理XML/JSON文件时无效。你知道我是如何让图标样式发挥作用的吗

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />

<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
type: "GET",
url: "jargon.xml",
dataType: "xml",
success: function(xml) {

var container = document.getElementById("catalogue");
container.setAttribute('data-role', 'collapsible-set');
container.setAttribute('data-collapsed', 'true');
$(xml).find('release').each(function(){
var release = document.createElement("div");
release.setAttribute('data-role', 'collapsible');
release.setAttribute('data-collapsed', 'true');
var cat = $(this).find('cat').text();
var title = $(this).find('title:first').text();
var artist = $(this).find('artist').text();
var tracks = "";
$(this).find('track').each(function(){
tracks = tracks + $(this).find('title').text() + "<br>";
});
release.innerHTML = "<h3>" + cat + "<br></h3><p>" + artist + "</p>";
container.appendChild(release);

});

var catDiv = $('#catalogue');
catDiv.find('div[data-role=collapsible]').collapsible({theme:'b',refresh:true});
}
});
});

</script>

---

请原谅我没有仔细检查您的代码以找到相关元素，但我认为问题在于：

您需要在包含具有jQM数据属性的元素的父元素上调用jQM的triggercreate方法

下面是代码可能的样子：

$("#myElement").trigger("create");

---

这将对所选元素的所有子元素应用jQuery Mobile功能和样式。

在附加可折叠元素之前，请更改collapsedIcon和expandedIcon选项

release.collapsible({
    collapsedIcon:"arrow-d",
      expandedIcon:"arrow-u",
        theme:"b"
    }).appendTo("target_div);