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

2023年12月15日 261次阅读

我正在使用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动态加载它们.有没有办法懒得加载它们并以某种方式在后台刷新样式表？还是其他任何技巧来帮助我？

非常感谢！

最佳答案 是否正在加载文件的head元素中引用的样式表？如果是这样,它将不会被加载,因为加载会静默过滤除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>
点赞