...on my page (I do not use a resettable set because I want the...">

JQuery Mobile updates legibly

I have several <div data-role="collapsible">...</div>on my page (I do not use a resettable set because I want the ability to open several at once), and then I delete them and create several new ones with Javascript. Now I want them to have jQuery Mobile Styling, but no matter what I do, they will not be updated. I tried:

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

I even placed a folding set around each of them and tried to update using this (described in jQuery Mobile Documentation )

I am adding new divs with $("<div data-role="collapsible">...</div>").insertBefore("#foo");

What is the right way to do this? And does jQuery Mobile-style content appear also after the update?

UPDATE

Collapsible content has not been updated, here is my code:

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");
+3
2

, , .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());
});

+7

:

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

All Articles