jQuery的load()和样式表不起作用？

Question

jQuery的load()和样式表不起作用？

javascriptjqueryloadlazy-loadingstylesheet

4

我正在使用load()函数将文件加载到div中，但是在加载数据后，它的样式无法正常工作。

例如：

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

我点击“a”链接后，内容被加载到#Display div中，然后完美显示，但是标题头不是红色的，内容段落也不是绿色的。我相信这是默认行为，因为当网站首次加载时没有这些元素，我是用jQuery动态加载它们的。有没有一种懒加载它们并在后台刷新样式表的方法？还是其他什么诀窍可以帮助我？

非常感谢！

- aldona

styles.css被嵌入在哪里？此外，您确定在这里使用ID是一个好主意吗？（在同一文档中有多个具有相同ID的元素是无效的。） - Pekka

你确定CSS文件在页面中被正确引用了吗？即使是通过AJAX加载，元素也应该立即获得样式。 - Nick Craver

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- tvanfosson · Accepted Answer

样式表是否被引用在正在加载的文件的head元素中？如果是，由于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>