我想知道将html页面（page1.html）加载到主页（index.html）中的div中的方法是什么，然后将另一个html页面（page2.html）加载到div中在页面内部加载（page1.html）。我的意思是。
的index.html
<div id="content"></div>
<a class="link" href="#">load</a>
脚本
$(document).ready(function() {
$('a.link').live('click', function() {
$('#content').load('page1.html', function(){
$('#content2').load('page2.html');
});
});
});
page1.html
<div id="content2"></div>
只需单击一下就可以正常工作，第二次点击它会加载page2.html 0.5秒，然后加载page1.html。
问题是什么???
谢谢
答案 0 :(得分：1)
你采取的方法感觉不对。如果您别无选择，只能使用此多ajax请求方法填充页面，请在继续填充content2之前，尝试使用第1页中的数据显式填充内容div。这意味着您无法使用.load选择器，并且需要执行常规的ajax请求，例如：
$(document).ready(function() {
$('a.link').live('click', function() {
$.ajax({
url : 'page1.html',
success: function(data){
$('#content').html(data);
$('#content2').load('page2.html');
}
});
});
});
答案 1 :(得分：1)
使用你的代码示例我无法重现错误 - 或者我应该称之为“bug”？ - 在Chrome，Firefox甚至IE8上使用jQuery 1.6.4。
我注意到启用了浏览器缓存的意外行为。在Page1.html上进行的源更改，在第一次单击链接后未从服务器获取。我建议您使用Firebug或Chrome开发者工具禁用浏览器缓存，然后再次进行测试。
另外，请尝试使用jQuery的更新版本，或至少使用http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js中使用的相同版本。
以上任何一项都不起作用，请尝试设置延迟以获取page2.html。
$(document).ready(function() {
$('a.link').live('click', function() {
$('#content').load('page1.html', function(){
setTimeout("$('#content2').load('page2.html')", 250); // try diff. values
});
});
});
如果这不能解决问题，那么查看page1.html和page2.html的完整来源会有所帮助。
答案 2 :(得分：1)
试试这个。
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#link').live('click', function() {
$.ajax({
url : 'ajax_info.txt',
dataType : 'text',
success: function(data){
var $response1 = $('<div />').html(data);
$.ajax({
url : 'ajax_info.txt',
dataType : 'text',
success: function(data){
responseCombined = $response1.find('p:last').html(data).end().html();
$('#content').html(responseCombined);
}
});
}
});
});
});
</script>
</head>
<body>
<div id="content"></div>
<div id='link'>load</div>
</body>
</html>
在第一个请求的成功回调中，我尝试将responseHTML加载到temp <div>中，并在第二个请求的回调中，我搜索了元素p:last（在您的情况下，它将＃content2）并将第二个ajax请求的响应放入其中。最后，将合并后的数据放入#content。
对于演示，请转到http://w3schools.com/ajax/tryit.asp?filename=tryajax_first并运行上面的代码。
答案 3 :(得分：1)
<body>
<a href="#" class="link">i load your page</a>
<div id="container-page1">
</div>
</body>
<div>
<p>i'm important text</p>
<div id="container-page2"></div>
</div>
我使用了一个事件触发器，因为它可以使你的javascript保持平稳。否则，如果您需要在以后更深入地进行3或4次ajax调用，最终可能会得到一些深层嵌套的代码！
如果你的jQuery是＆lt; 1.7，然后让我知道，我可以扔在一起.delegate / .live等价物。
$(document).ready(function() {
$('body').on({'click': function(evt) {
$(evt.data.containerSelector).load(evt.data.page1Url, function(data, status, jqxhr){
$(this).trigger(evt.data.loadPage2Event);
});
},'a.link',{page1Url:'page1.html',
loadPage2Event:'loadPage2',
containerSelector:'#container-page1'});
$("#container-page1",'body').on({'loadPage2':function(evt){
$(this).load(evt.data.page2Url);
}},'#container-page2',{page2Url:'page2.html'});
});
答案 4 :(得分：1)
使用最新的JQuery，并在Chrome，Firefox和Linux上运行IE 9，以下工作完美无缺：
<强>的index.html
<html>
<head>
<title>Index</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a.link').live('click', function() {
$('#content').load('link1.html', function(){
$('#content2').load('link2.html');
});
});
});
</script>
</head>
<body>
<div id="content"></div>
<a class="link" href="#">load</a>
</body>
</html>
<强> link1.html
<html>
<head>
<title>Page 1</title>
</head>
<body>
<p>This is page 1</p>
<div id="content2"></div>
</body>
</html>
<强> link2.html
<html>
<head>
<title>Page 2</title>
</head>
<body>
<p>This is page 2</p>
</body>
</html>
所以我要说你没有最新版本的jQuery，或者问题出现在page1或page2.html中的其他内容
答案 5 :(得分：1)
如果我是正确的，那么在第一个容器加载后，你正试图加载到第二个secontainer
在标记上添加一个简单的类
<div id="content" class="toload"></div>
＆安培;
<div id="content2" class="toload"></div>
现在，这是你需要的神奇jQuery
$(document).ready(function() {
$('a.link').live('click', function() {
$('.toload').load('page1.html', function(){
$(this).removeClass('toload'); //Remove the class so that next time it does not get affected
});
});
});
答案 6 :(得分：1)
您的答案适用于我的Chrome，但请尝试empty内容，以确保您没有双#content元素
$(document).ready(function() {
$('a.link').live('click', function() {
$('#content:first').empty().load('page1.html', function(){
$('#content2').load('page2.html');
});
});
});
答案 7 :(得分：0)
在为其分配新内容之前，您是否尝试先清空#content
$(document).ready(function() {
$('a.link').live('click', function() {
$('#content').empty();
$('#content').load('page1.html', function(){
...
答案 8 :(得分：0)
试试这个：
$('a.link').live('click', function(e) {
e.preventDefault();
$('#content').load('page1.html', function(){
$('#content2').load('page2.html');
});
});
答案 9 :(得分：0)
您需要确保page1.html中有DOM元素，您可以在index.html jQuery中引用它作为选择器。所以这是一个可以用于page1.html的布局：
<div id="content2">//id name changed
Content
</div>
在index.html中，使用此jQuery：
$(function(){
$('a.link').live('click',function(){
$('#content').load('1.html', function(){
$('#content2').load('2.html');
});
});
});
如果它仍在闪回并删除＃content2内的2.html，请查看您是否多次点击该链接。此外，使用FireBug或Chrome的Inspect Element工具检查所有网络传输，以查看正在加载的内容和不加载的内容。
答案 10 :(得分：0)
所以这就是我如何解决这个问题......
$(document).ready(function() {
$("a.link").click(function() {
$.ajax({
url:'page1.html',
success:function(data) {
$("#page1").html(data);
},
complete:function() {
$.ajax({
url:'page2.html',
success:function(data) {
$("#page2").html(data);
}
});
}
});
});
});
稍微多一些代码，但是使用成功和完整的回调函数应该可以更好地控制填充这些div的时间。在我的例子中，index.html有 和page1.html有标签 - 似乎工作正常，对我来说没有任何困难......