jQuery加載（）和樣式表不工作？

我正在用load（）函數將文件加載到div中，但在加載數據後 - 它的樣式不想工作。jQuery加載（）和樣式表不工作？

例如：

的index.html：

$("a ").click(

    function(e) 
    { 
    e.preventDefault(); 

     $("#Display").load('file.html');  
     $("#Display").show(); 
});

file.html：

<h1 id="title">Item number #1</h1> 
<p id="content">Lorem ipsum like text...</p>

的style.css：

#title { 
    color: red; 
} 

#content { 
    color: green; 
}

後，我點擊「是」鏈接，內容被加載到#Display div中n完美顯示，但標題標題不是紅色且內容段落不是綠色。

我相信這是一個默認行爲，因爲當網站首先加載時，沒有這樣的元素，我用jQuery動態加載它們。有沒有辦法延遲加載它們並以某種方式刷新背景中的樣式表？或者其他任何技巧來幫助我？

非常感謝！

來源

2010-08-20 aldona

styles.css嵌入在哪裏？另外，你確定在這裏使用ID是個好主意嗎？（在同一個文檔中有多個具有相同ID的元素是無效的。） – 2010-08-20 10:43:53

您確定該CSS文件是否正確地包含在頁面中？即使在加載AJAX時，元素也應立即得到樣式。 – 2010-08-20 10:44:07

在被加載的文件的head元素中引用了樣式表嗎？如果是這樣，它將不會被load加載，因爲load以靜默方式過濾除body元素的內容之外的所有內容。如果您將樣式表包含在腳本運行的文檔中，並將其中的其他文檔加載到其中，那麼它應該可以正常工作。

<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>

來源

2010-08-20 10:53:18 tvanfosson

樣式表嵌入在jQuery函數所在的main index.html文件中。所以我猜一切都是正確的？加載的文檔中沒有頭部分，因爲它不是一個完整的文檔，而只是幾段文本（就像PHP一樣）。 – aldona 2010-08-20 11:28:47

它應該工作。其他風格是否有可能壓倒他們？您是否使用Firebug進行了檢查，以查看文檔加載後應用了哪些規則？ – tvanfosson 2010-08-20 15:32:25

jQuery加載（）和樣式表不工作？

回答

相關問題