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

Question

使用此代码/方法，我终于将 JQuery Mobile 可折叠样式应用于从 XML 文件中提取的数据 - 但我无法使所有 Jquery 样式都起作用，例如图标，它不起作用.例如，我希望将 data-collapsed-icon 设置为 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>

Answer 1

请原谅我没有梳理您的代码来找到相关元素，但我认为问题在于:

您需要在包含具有 jQM 数据属性的元素的父元素上调用 jQM 的 trigger("create") 方法。

代码可能如下所示:

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

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