Question

我正在尝试使用jQuery的.load函数将内容动态加载到我的网页中。这看起来很简单，但我无法使其发挥作用。为了试图找出它，我做了一个只有基本结构的测试页面，但外部内容仍然无法加载：

jquery.html

<html>
<head>
<title>JQuery Test</title>
<script src="jquery1.5.min.js"></script>
</head>
<body>

<script>
    $('#foo').load('test.html');
</script>

<div id="foo"></div>

</body>
</html>

的test.html

<p>Text text</p>

我确定我犯了一个小错误，但我无法在任何地方找到它！

Answer 1

您需要将脚本封装在$(document).ready()中，否则执行脚本时#foo将不存在：

<script>
    $(document).ready(function(){
      $('#foo').load('test.html');
    });
</script>

Answer 2

您需要等待文档准备好才能访问DOM。只需在原始代码周围添加$（document）.ready（）：

<html>
<head>
<title>JQuery Test</title>
<script src="jquery1.5.min.js"></script>
</head>
<body>

<script>
    $(document).ready( function() {
        $('#foo').load('test.html');
    });
</script>

<div id="foo"></div>

</body>
</html>

Answer 3

或者如果您想要更短的代码：

$(function() {
    $('#foo').load('test.html');
});

Answer 4

非正式地说，正在发生的事情是，当您的浏览器读取您编写的代码时，它会随着时间的推移绘制其内容。当它到达您的<script>标记时，它会执行它。但是当$("#foo")被执行时，浏览器仍在处理<script>并且还没有到达你告诉它的代码部分有一个名为foo的div，所以浏览器不知道它存在，而jquery什么都不会找到。

当然，浏览器只是按顺序读取代码并按原样呈现它的想法最多是天真的，所以虽然看起来只是将<script>标记移动到代码的底部会工作，你实际上并没有保证它会起作用。相反，浏览器将通过触发加载（以及可能的DOMContentLoaded）事件来完成绘制页面时通知您。因此，所有依赖于绘制的整个html的代码都应该在绑定到这些事件的事件处理程序中执行。

jQuery使得等待页面加载变得容易，只需使用这样的东西：

$.ready(function() {
  doStuff();
});

基本的jQuery .load问题

4 个答案: