我在页面上有几个<div data-role="collapsible">...</div>
(我不使用可折叠集,因为我希望有可能同时打开几个),然后我用Javascript将它们删除并创建了几个新的。现在我想让它们具有jQuery Mobile样式,但无论我做什么,它们都不会刷新。我尝试过:
$("parentdiv").refresh();
$("parentdiv").trigger("create");
$(".ui-collapsible").refresh();
$(".ui-collapsible").trigger("create");
我甚至在每个折叠面板周围加了一个可折叠组并尝试使用此方法进行刷新(在jQuery Mobile文档中描述)。
我用
$("<div data-role="collapsible">...</div>").insertBefore("#foo");
添加了新的div。正确的方法是什么?刷新后,内容是否也以jQuery Mobile样式显示?
更新
这里折叠面板的内容没有被刷新,这是我的代码:
var newColla = "<div id=\"colla" + i + "\" data-role=\"collapsible\" data-collapsed=\"true\" data-collapsed-icon=\"minus\" data-expanded-icon=\"bars\">" +
"<h3 id=\"" + matrikelnummer + "\">" + matrikelnummer + " " + studentName + "</h3><div class=\"colla-content\">" +
"<div data-role=\"fieldcontain\" style=\"margin:0px;width:100%;text-align:right;\">" +
"<a href=\"\" data-role=\"button\" id=\"edit_" + matrikelnummer + "_" + studentName + "\" class=\"edit ui-btn-right\" data-mini=\"true\" data-inline=\"true\" data-icon=\"edit\" data-iconpos=\"left\">Teilnehmer bearbeiten</a>" +
"<a href=\"\" data-role=\"button\" id=\"delete_" + matrikelnummer + "_" + studentName + "\" class=\"delete ui-btn-right\" data-mini=\"true\" data-inline=\"true\" data-icon=\"delete\" data-iconpos=\"left\">Teilnehmer löschen</a>" +
"</div>";
// Für jede ausgewählte Aufgabe einen Slider hinzufügen
for (var j = 0; j < aufgaben.length; j++) {
newColla += "<label for=\"slider_mini\">Aufgabe " + aufgaben[j] + ": (max." + allMaxPoints[j] + "Pkt.)</label>" +
"<input type=\"range\" name=\"slider_mini_" + matrikelnummer + "_" + aufgaben[j] +"\" class=\"slider-mini allSliders\" id=\"slider_mini_" + matrikelnummer + "_" + aufgaben[j] + "\" " + theme + " step= 0.5 value=\"0\"" +
"min=\"0.0\" max=\"" + allMaxPoints[j] + "\" data-highlight=\"true\" data-mini=\"true\" />";
}
newColla += "</div></div>";
$(newColla).collapsible().trigger("create").insertAfter("#timer");