Question

我有一个名为index.html的HTML页面，其中包含2个div：

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/mystyle.css" media="all" />
        <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
        <script language="javascript">
        $('#menu1').click(function(){
            $("#content").load( "new_content.html" );
        });
        </script>
    </head>
    <body>
        <div id="menu">
            <ul>
                <li id="menu1">menu item 1</li>
                <li>menu item 2</li>
                <li>menu item 3</li>
            </ul>
        </div>
        <div id="content">
            Hello World
        </div>
    </body>
</html>

我还有第二个名为new_content.html的html页面，其中包含：

<h1>This is new content</h1>
<span class="blue">This line should be blue</span><br />
<span class="red">This line should be red</span>

mystyle.css文件包含：

.blue {
    color: blue;
}

.red {
    color: red;
}

我遇到的第一个问题只发生在chrome中，这是所有浏览器中的第二个问题。当我单击“菜单项1”列表元素时，内容div会更新，我会看到H1标题及其下面的2行，但我遇到以下两个问题：

这两行是黑色的，css没有被应用
当我通过右键单击浏览器来使用视图源时，内容div包含旧代码，即“Hello World”。

所以我对此感到有些困惑，因为我可以清楚地看到H1标题和它下面的2行，但没有应用css，浏览器似乎认为没有发生任何变化。

也许我错过了一些东西，我对jQuery很陌生，也许load（）函数不是以这种方式使用的。

我很感激您在此主题上可以提供的任何启示。

此致 Crouz

Answer 1

我刚尝试了IE10，FF，Chrome，Safari中的代码，CSS在所有这些代码中运行良好。（我把所有东西都复制到我的本地机器上）

关于问题1：确保正确加载CSS文件。 [也许你有路径问题] 您可以通过将class="blue"分配给外部加载之前存在的某些内容来快速检查，并查看是否适用。

类似的东西：

    <ul>
        <li id="menu1" class="blue">menu item 1</li>
        <li>menu item 2</li>
        <li>menu item 3</li>
    </ul>

关于问题2：这是完全正常的，HTML源代码是原始HTML，只有你的DOM已经改变。 - 您可以在任何浏览器中通过页面检查器查看这些更改。

编辑:(因为你的意见）

显然，这是由浏览器现金引起的（当所有内容都是黑色时，您的浏览器保存了旧样式）使用CTRL + F5刷新页面以重新加载所有内容。

并且，关于＆＃39;加载＆＃39; :(来自documentation）

附加说明：

由于浏览器安全限制，大多数＆＃34; Ajax＆＃34;请求受原始政策的约束;请求无法成功从其他域，子域或协议中检索数据。

Answer 2

试试这个：

$('#contentPagina').load(nombrePagina,function(){ $('#contentPagina').trigger('create'); });

将html代码加载到div中，css未应用

2 个答案: