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加载（）和样式表不工作？

回答

相关问题