CSS-Stile werden nicht aktualisiert, nachdem AJAX ausgeführt

Ich verwende den folgenden AJAX-Code, um Inhalt aus einer anderen HTML-Datei an meine Indexseite anzufügen. Der AJAX funktioniert korrekt und mein Inhalt wird angezeigt, aber die Stile, die ich im CSS codiert habe, werden nicht angewendet, nachdem der AJAX ausgeführt wurde.CSS-Stile werden nicht aktualisiert, nachdem AJAX ausgeführt

Ich habe das Netz auf der Suche nach einer Antwort auf das Problem gesucht, aber bis jetzt haben die Lösungen, die ich versucht habe, nicht funktioniert. Im Folgenden verwende ich .trigger ('create'), um zu versuchen, die CSS-Aktualisierung für den Inhalt, den ich angehängt habe, zu erzwingen, aber es funktioniert nicht. Wenn ich die Seite manuell über den Browser aktualisiere, werden meine Stile angewendet. Kann mir jemand in die richtige Richtung zeigen, wie die Styles aktualisiert werden, nachdem AJAX ausgeführt wurde, ohne die gesamte Seite zu aktualisieren?

$.ajax({ type: "GET", 
    url: pageToLoad, 
    async: false, 
    success : function(data) 
    { 
     $(data).find('#'+divID).appendTo('#contentcontainer').trigger('create'); 
    } 
});

HTML, die Index-Seite angehängt wird:

<div class="content" id="portfolio"> 
    <div class="wrapper"> 
     <h2>Portfolio</h2> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum libero non egestas dapibus. Nam gravida, libero ac posuere eleifend, mauris nisi venenatis metus, non hendrerit magna justo eget lectus.</p> 
    </div><!--wrapper--> 
    <div class="clear"></div> 
</div><!--content-->

CSS-Stile in default.css angewendet:

#index {background-color:#82e4e5;} 
#portfolio {background-color:#fb5656;}

Quelle

2013-09-06 Leann

Hallo Leann, Browser * sollten * Stile auf HTML über AJAX hinzugefügt anwenden. Wenn nicht, vergewissern Sie sich, dass in der CSS-Auswahl kein Tippfehler enthalten ist. Es sieht nicht so aus, wie ich es sehe, aber ich weiß nicht, ob da mehr passiert. Ein weiterer Fehlerbehebungsschritt könnte darin bestehen, den HTML-Code direkt in Ihre Datei zu platzieren, um sicherzustellen, dass er formatiert wird, und das JavaScript aus der Gleichung entfernt. Wenn es style, dann sollte es das Problem als etwas seltsames Geschehen in der JS eingrenzen. – jmbertucci

Sie versuchen, diese haben?

$.ajax({ type: "GET", 
    url: pageToLoad, 
    async: false, 
    success : function(data) 
    { 
     $(data).find('#'+divID).appendTo('#contentcontainer').trigger('create'); 
     $('#index').css("backgroundColor", "#82e4e5"); 
     $('#portfolio').css("backgroundColor", "#fb5656"); 
    } 
});

Quelle

2013-09-06 02:34:35

Hey Lion, danke für die Antwort. Allerdings möchte ich in der Lage sein, das CSS aus dem Stylesheet selbst zu steuern, anstatt die Farben über jQuery anzuwenden. Es gibt viel mehr Styling, das ich tun muss, nachdem ich das funktioniert habe (x Hoffentlich! X). Wissen Sie, wie Sie die Stylesheet-Aktualisierung erzwingen, nachdem der AJAX ausgeführt wurde? – Leann

Wie bei Lebolo, habe ich einen Ajax-Aufruf gemacht, um etwas an die Seite anzuhängen und alle können Stylesheets ohne Probleme lesen. Können Sie genauer auf Ihr Problem eingehen? –

Jeder, ich habe beschlossen, die jQuery in eine andere Richtung zu nehmen. Es scheint besser mit den Stilen zu funktionieren, die bereits vorhanden sind. Diese Frage ist nicht mehr gültig. Danke für das Antworten! – Leann

Sie sollten Ihre Styles nicht nach einem AJAX-Aufruf aktualisieren müssen. Können Sie als Beispiel ein jsFiddle erstellen?

Ich habe eine jsFiddle erstellt, die für mich funktioniert. Aber ich musste das injizierende HTML mit einer div umgeben. Ich habe auch den Code .trigger('create') losgeworden.

Quelle

2013-09-06 02:59:11 lebolo

CSS-Stile werden nicht aktualisiert, nachdem AJAX ausgeführt

Antwort

Verwandte Themen