jQuery Mobile 刷新可折叠答案

【问题标题】：jQuery Mobile refresh collapsiblejQuery Mobile 刷新可折叠
【发布时间】：2015-10-30 19:24:46
【问题描述】：

我的页面中有几个<div data-role="collapsible">...</div>（我不使用可折叠集，因为我希望可以一次打开多个），然后我删除它们并使用 Javascript 创建一些新的。现在我希望他们拥有 jQuery Mobile 样式，但无论我做什么，他们都不会刷新。我试过了：

$("parentdiv").refresh();
$("parentdiv").trigger("create");
$(".ui-collapsible").refresh();
$(".ui-collapsible").trigger("create");

我什至在每一个周围都放了一个可折叠的集合，并尝试用它来进行刷新（在jQuery Mobile Documentation 中有描述）

我用$("<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");

【问题讨论】：

你用的是哪个版本？

标签： javascript jquery html jquery-mobile

【解决方案1】：

您只需要使用.collapsible()，可折叠 小部件没有refresh 方法。

$(document).on("pageinit", function () {
    var collapsible = '<div data-role="collapsible"><h3>Heading</h3><p>Contents</p></div>';
    $("[data-role=content]").append($(collapsible).collapsible());
});

Demo

【讨论】：

现在可折叠显示为 jQuery Mobile 可折叠。但内容（我有滑块和按钮）不刷新
@elementzero23 在这种情况下你是$(collapsible).collapsible().trigger("create")。你用的是哪个版本？
我正在使用 jQuery Mobile 1.3.2 稍后会试试这个
@elementzero23 $(collapsible).collapsible().trigger("create") 应该增强可折叠内的所有元素。如果没有，请用代码更新 OP。
@elementzero23 检查这个jsfiddle.net/Palestinian/AqbyA，.trigger("create") 应该在父 div 上调用 $("[data-role=content]").append($(collapsible).collapsible()).trigger("create");

【解决方案2】：

试试这个：

$( ".selector" ).collapsibleset( "refresh" );

【讨论】：