1

我有一个名为 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 行，但出现以下 2 个问题：

  1. 两条线是黑色的，css没有得到应用
  2. 当我通过在浏览器中单击右键使用视图源时，内容 div 包含旧代码，即“Hello World”。

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

也许我遗漏了一些东西，我对 jQuery 很陌生，也许 load() 函数不打算以这种方式使用。

我将不胜感激您可以就该主题提供的任何启发。

问候克鲁兹

4

2 回答 2

0

尝试这个：

$('#contentPagina').load(nombrePagina,function(){ $('#contentPagina').trigger('create'); });
于 2014-09-22T19:17:06.883 回答
0

我刚刚在 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 刷新页面以重新加载所有内容。

还有，关于“加载”：（来自文档）

补充说明：

由于浏览器安全限制，大部分“Ajax”请求都受同源策略的约束；请求无法从不同的域、子域或协议成功检索数据。

于 2013-09-23T13:31:05.890 回答