jQuery 加载坏了？
Posted
技术标签:
【中文标题】jQuery 加载坏了？【英文标题】：jQuery load broken? 【发布时间】：2014-05-30 07:19:18 【问题描述】：所以我在 jQuery 上注意到，当他们替换 .html() 时，甚至他们的示例都不能正常工作。我试图帮助用户解决 AJAX 问题，但突然间 AJAX 在我的测试页面和他的示例中都没有表现。事实上，无论是通过$('#feedback').load() 设置还是使用函数附加数据，它都不会添加对#feedback 的响应！但是，如果您提醒数据，果然，您拥有整个页面（也是另一个问题，因为我们应该只抓取正文！）
jQuery 发生了什么？
触发页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(function ()
$('#button').click(function ()
$('#feedback').load('test.htm #body', function(data)
alert(data);
$('#feedback').html(data); // Append again... y u no work!?
);
);
);
</script>
</head>
<body>
<input id="button" type="submit" value="Go" />
<div id="feedback">Welcome</div>
</body>
</html>
测试页test.htm
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body id="body">
Welcome again <label id="var_name" name="callBack_data" />
</body>
</html>
此操作的结果将alert() 整个页面 而不仅仅是正文。它也不会将数据附加到 div。
通过将按钮类型更改为type="button"，我们可以将一些数据加载到 div，但是没有正确的选择。
更新了可以工作的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(function ()
$('#button').click(function ()
$('#feedback').load('test.htm #body');
);
);
</script>
</head>
<body>
<input id="button" type="button" value="Go" />
<div id="feedback">Welcome</div>
</body>
</html>
测试页更新
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<div id="body">
Welcome again <label id="var_name" name="callBack_data" />
</div>
</body>
</html>
【问题讨论】：
您不是在追加，而是在替换 HTML。在这种情况下，您将 #feedback 的 HTML 替换为请求的整个页面，而不是加载请求中指定的位。 【参考方案1】：.load 已经做了 .html 部分，你不需要自己做。
$('#feedback').load('test.htm #body');
此外，<body> 在您执行 $("<div>").html("<body></body>") 时会被删除，因此通过 id 定位它是行不通的。使用 id="body" 将文本包装在 div 中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<div id="body">
Welcome again <label id="var_name" name="callBack_data" />
</div>
</body>
</html>
这将导致
<div id="feedback">
Welcome again <label id="var_name" name="callBack_data" />
</div>
将显示为：
再次欢迎
【讨论】：
重点是，事实并非如此。请尝试代码或阅读我的解释。 实际上 load() 的工作方式与@JordanThompson 的预期一样。你需要看看这些东西是如何工作的。 @JayBlanchard 不，不是。它不委托#body 也不将HTML 输入到div。 See their documentation 您甚至不会注意到他们的“将主页的页脚导航加载到有序列表中”。正在工作 演示不起作用，因为它是为与旧的 api 站点一起工作而编写的，新的没有被引用的元素。 （有人应该对此进行错误报告） @KevinB 解释了很多。我提交了需要更新的页面。以上是关于jQuery 加载坏了？的主要内容，如果未能解决你的问题，请参考以下文章
jquery是怎么实现：页面加载完毕，而图片未加载完成时，触发的事件？