jQuery Mobile: Style für dynamisch generierten Content

Du kannst die Funktionen .trigger("create") oder .enhanceWithin() auf die neuen Elemente anwenden, um die Styles anzuwenden.

Wenn du dynamischen Content zum Beispiel in eine DIV-Box mit der ID "divid" geladen hast, ginge das so:

$("#divid").enhanceWithin();

Damit würden alle Elemente in der DIV-Box "divid" neu gestylt werden. Die Funktion .trigger("create") tut im Grunde genommen das gleiche, wurde aber mit der Version jQuery Mobile 1.4 als veraltet gekennzeichnet, man sollte stattdessen also .enhanceWithin() benutzen.

Wenn man alles in einer Funktion haben möchte, geht es so:

var newHTML = '<p>Neuer Inhalt</p>';
$("#divid").html(newHTML).enhanceWithin();

Unser neuer Inhalt steht in der Variable newHTML. Wir fügen diesen Inhalt in die DIV-Box mit der ID "divid" hinzu und aktualisieren anschließend den Style.

Es ist auch möglich einzelne Elemente anzusprechen, zum Beispiel:

$("select").selectmenu("refresh");
$("ul").listview("refresh");
$(".myclass").collapsibleset("refresh");

Mit der ersten Zeile können wir zum Beispiel das Menü einer Select-Auswahlbox aktualisieren wenn die neue Einträge hinzugefügt haben. Das Beispiel darunter aktualisiert alle Listviews und mit dem dritten Beispiel lassen sich alle Collapsible Sets der Klasse "myclass" aktualisieren.
18.05.2015 um 15:31