Javascript 基本jQuery.load问题_Javascript_Jquery_Html

Javascript 基本jQuery.load问题

javascript jquery html

Javascript 基本jQuery.load问题,javascript,jquery,html,Javascript,Jquery,Html,我正在尝试使用jQuery的.load函数将内容动态加载到我的网页中。这看起来很简单，但我不能让它工作。为了解决这个问题，我制作了一个只有基本结构的测试页面，但是外部内容仍然无法加载： jquery.html <html> <head> <title>JQuery Test</title> <script src="jquery1.5.min.js"></script> </head> <body>

我正在尝试使用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>


JQuery测试
$（'#foo'）.load（'test.html'）；

test.html

<p>Text text</p>

文本

我肯定我犯了一个小错误，但我在任何地方都找不到

您需要将脚本封装在

$（document）.ready（）

中，否则执行脚本时将不存在

\foo

：

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


$（文档）.ready（函数（）{
$（'#foo'）.load（'test.html'）；
});

您需要等待文档准备就绪，然后才能访问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>


JQuery测试
$（文档）.ready（函数（）{
$（'#foo'）.load（'test.html'）；
});

或者，如果您需要较短的代码：

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

非正式地说，所发生的事情是，当浏览器读取您编写的代码时，它会在运行过程中绘制其内容。当它到达您的

标记时，它将执行它。但是当执行

$（“#foo”）

时，浏览器仍在处理

，并且还没有到达您告诉它有一个名为foo的div的代码部分，因此浏览器不知道它存在，jquery将什么也找不到

当然，浏览器只按顺序读取代码并按原样呈现代码的想法充其量是幼稚的，因此，尽管将

标记移到代码底部似乎可以工作，但实际上并不保证它可以工作。相反，浏览器将在绘制完页面后通过触发加载（可能还有DOMContentLoaded）事件通知您。因此，所有依赖于所绘制的整个html的代码都应该在绑定到这些事件的事件处理程序中执行

jQuery使等待页面加载变得很容易，只需使用如下内容：

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

您需要将加载内容包装到一个

ready（）

块中。或者，因为您的

在正文中，所以将其放在正文的末尾。要详细说明@Pekka的注释，请将JS替换为：

$（document）.ready（function（）{$（'#foo'）.load（'test.html'）；}）

或者更简单地说，

$（function（）{$（'#foo'）.load（'test.html'）；}）

您还可以检查以确保jquery1.5.min.js和test.html与上面提供的代码片段位于同一文件夹中。此外，请确保通过单击旁边的复选标记将正确答案标记为已接受。它们都位于同一文件夹中，我已将移动到末尾，但仍无法加载。继续问这个我觉得很傻，但为什么它不起作用？！或者，如果您喜欢快捷方式-$（function（）{/*这里的代码在ready*/}上运行）；如果脚本出现在

#foo

之后的任何位置，它将在没有

.ready（）

的情况下工作。