Javascript - CSS anwenden, nachdem die Seite initialisiert wurde

Question

Also baue ich dynamisch ein Formular mit Eingaben, die mit Jquery Mobile gestylt sind, und frage mich, ob es eine Möglichkeit gibt, ein Refresh auszulösen, das nicht mit Jquery zusammenhängt. Grundsätzlich verwende ich ein Plugin eines Drittanbieters für einen Datumsauswähler, und wenn die Seite geladen wird, werden die entsprechenden Styles nicht angewendet. Weiß jemand, wie man eine einzelne Eingabe eines Formulars aktualisieren kann?

Ich möchte nicht die ganze Seite neu laden, sondern nur das Formular aktualisieren, um die Styles des Drittanbieters auf die einzelne Eingabe anzuwenden. Entschuldigung, wenn dies eine Anfängerfrage ist, ich fange gerade erst mit JS und HTML5 an. Hat jemand Vorschläge?

---

UPDATE: Also sieht der HTML-String, den ich erstelle und in das Formular einfüge, so aus:

Dies funktioniert perfekt, wenn ich ihn in das Seiten-HTML einfüge, aber nicht, wenn ich ihn dynamisch in das Formular einfüge. Die Zeichenketten sind identisch, was bedeutet, dass sie anscheinend nicht mit den CSS-Styles aktualisiert werden.

Answer 1

Also, eine Regel bei jQuery Mobile ist, dass Sie viele gängige Praktiken verlernen müssen. JQM navigiert zur nächsten Seite, indem es die Zielseite per AJAX herunterlädt, dann deren HTML in ein DIV lädt und dieses DIV in das aktuelle DOM animiert.

Eine (von vielen) Nebenwirkungen davon ist, dass Mediendateien, CSS, JS, was auch immer, sorgfältig geplant werden müssen. Es ist wahrscheinlich, dass das CSS für dieses Drittanbieter-Datepicker-Widget im des zu navigierenden Dokuments ist? Dinge, die im sind, werden nicht immer geladen.

Ich habe das umgangen, indem ich einige Dinge in das Tag verschoben habe, aber das ist irgendwie eine hacky Lösung. Der bessere Weg ist, eine einzige, minimierte und komprimierte CSS-Datei zu haben, die alles Notwendige einschließlich des CSS des Datepickers bereitstellt.

Answer 2

Es ist wahrscheinlich, dass das CSS, das auf den Datumswähler angewendet wird, entweder inline deklariert ist oder Vorrang hat vor dem, was du deklariert hast.

Wenn es sich um ein Vorrangsproblem handelt, schau dir http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/ an.

Wenn es sich um ein Inline-Problem handelt, füge einfach etwas zu deinem Code hinzu, das diese Werte außer Kraft setzt. Z. B.:

$(document).ready(function() {
    $('.datepicker').css('color', 'blue');
});

Du musst die Seite nicht "neu laden". Mit dem obigen Code werden die Inline-Stile angewendet, wenn alle Elemente geladen sind. Du kannst dasselbe in deinem AJAX-Callback machen anstelle von $(document).ready().