Question

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

非常感谢！

Answer 1

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

jQuery load（）和样式表不起作用？

1 个答案: