Ładuję plik do div z funkcją load (), ale po załadowaniu danych - style dla niego nie chcą działać.
Na przykład:
index.html:
$("a ").click(
function(e)
{
e.preventDefault();
$("#Display").load("file.html");
$("#Display").show();
});
plik.html:
<h1 id="title">Item number #1</h1>
<p id="content">Lorem ipsum like text...</p>
style.css:
#title {
color: red;
}
#content {
color: green;
}
Po kliknięciu linku „a” zawartość jest ładowana do #Display div, a następnie jest idealnie wyświetlana, ale nagłówek tytułu nie jest czerwony, a akapit treści nie jest zielony.
Uważam, że jest to zachowanie domyślne, ponieważ kiedyładowanie strony na początku nie ma takich elementów i ładuję je dynamicznie za pomocą jQuery. Czy istnieje sposób na ich leniwe załadowanie i odświeżenie arkusza stylów w jakiś sposób? Lub jakieś inne sztuczki, które mogą mi pomóc?
Wielkie dzięki!
Odpowiedzi:
2 dla odpowiedzi № 1Czy arkusz stylów jest przywoływany w elemencie head ładowanego pliku? Jeśli tak, to nie zostanie załadowany load bo load po cichu filtruje wszystko oprócz zawartościelement ciała. Jeśli dołączasz arkusz stylów do dokumentu, z którego uruchamia się skrypt i do którego zostanie załadowany drugi dokument, powinien on działać dobrze.
<head>
<link rel="stylesheet" type="text/css" href="styles.css" media="screen />
...
<script type="text/javascript" src="...jquery.js"></script>
<script type="text/javascript">
$(function() {
$("a").click( function(e) {
$("#Display").load("file.html");
$("#Display").show();
return false;
});
});
</script>
</head>
<body>
<p><a href="#">Load Content</a></p>
<div id="Display"></div>
</body>