Question

在我的index.html中，我有一堆空节标记。每个section标签从单独的文件中接收其各自的HTML代码。我的设置如下：

的index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Using jQuery's load()</title>
</head>
<body>
    <section id="section1"></section>
    <section id="section2"></section>
    <section id="section3"></section>
    <script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="assets/js/section-loader.js"></script>
</body>
</html>

section1.html

<h1>Section 1</h1>

section2.html

<h2>Section 2</h2>

section3.html

<h3>Section 3</h3>

部分-loader.js

$('#section1').load('section1.html');
$('#section2').load('section2.html');
$('#section3').load('section3.html');

当我第一次加载所有内容时，它会将每个部分的HTML加载到index.html中各自的部分标记中。这正是我想要发生的事情。

但是，当我刷新页面或打开它的新实例时，这些加载调用都不会发生。

我在section-loader.js中添加了一个警告，以查看该页面是否第二次被调用，并且我收到了意外的结果。警报导致所有内容完全以我想要的方式第二次运行（除了不需要的警报）。

我希望我已经解释得这么好了。这对我来说是非常奇怪的行为。

我有两个问题：

为什么会这样？
修复它的最佳方法是什么？

Answer 1

你必须等待onload事件，对于jQuery：

$(function() {
    $('#section1').load('section1.html');
    $('#section2').load('section2.html');
    $('#section3').load('section3.html');
});

为什么jQuery的load（）需要额外的代码？这个额外的代码应该是什么？

1 个答案: