jquery函数将html代码加载到div中，然后将其他内容加载到html加载的div中
我想知道将html页面（page1.html）加载到活动网页（index.html）中的div中的方法是什么，然后将另一个html页面（page2.html）加载到将在页面内的div中已加载（page1.html）。 我的意思是。
的index.html
load 脚本
$(document).ready(function() { $('a.link').live('click', function() { $('#content').load('page1.html', function(){ $('#content2').load('page2.html'); }); }); });
page1.html
只需单击一下就可以正常工作，第二次单击它会加载page2.html 0.5秒，然后加载page1.html。
有什么问题 ？？？
谢谢
你采取的方法感觉不对。 如果您别无选择，只能使用此多个ajax请求方法填充页面，请先尝试使用第1页中的数据显式填充内容div，然后再继续填充content2。 这意味着您无法使用.load选择器，并且需要执行常规的ajax请求，例如：
$(document).ready(function() { $('a.link').live('click', function() { $.ajax({ url : 'page1.html', success: function(data){ $('#content').html(data); $('#content2').load('page2.html'); } }); }); });
使用你的代码示例我无法重现错误 – 或者我应该称之为“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的完整源代码会有所帮助。
试试这个。
load
在第一个请求的成功回调中，我尝试将responseHTML加载到temp
并在第二个请求的回调中，我搜索了元素p:last （在你的情况下它将是＃content2）并放入第二个ajax请求的响应。 最后，将组合数据放入#content 。
对于演示，请转到http://w3schools.com/ajax/tryit.asp?filename=tryajax_first并运行上面的代码。
你的主页面HTML
i load your page
你的page1 html
i'm important text
jquery>版本1.7
我使用了一个事件触发器，因为它保持你的javascript平。 否则，如果你需要更深入地进行3或4个ajax调用，你最终可能会得到一些深层嵌套的代码！
如果你的jQuery是<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'}); });
使用最新的JQuery，并在Chrome，Firefox和IE 9上运行，以下工作完美无缺：
INDEX.HTML
Index load
link1.html
Page 1 This is page 1
link2.html
Page 2 This is page 2
所以我会说你没有最新版本的jQuery，或者问题是在page1或page2.html中的其他内容
如果我是正确的，那么在加载第一个容器后，您将尝试加载到第二个secontainer
在标记上添加一个简单的类
＆
现在，这是您需要的神奇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 }); }); });
你的答案适用于我的chrome，但尝试empty内容以确保你没有双重#content元素
$(document).ready(function() { $('a.link').live('click', function() { $('#content:first').empty().load('page1.html', function(){ $('#content2').load('page2.html'); }); }); });
在为其分配新内容之前，您是否尝试先清空#content
$(document).ready(function() { $('a.link').live('click', function() { $('#content').empty(); $('#content').load('page1.html', function(){ ...
试试这个：
$('a.link').live('click', function(e) { e.preventDefault(); $('#content').load('page1.html', function(){ $('#content2').load('page2.html'); }); });
你需要确保page1.html中有DOM元素，你可以在index.html jQuery中引用它作为选择器。 所以这是一个可以用于page1.html的布局：
//id name changed Content
在你的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工具检查所有网络传输，以查看正在加载的内容和不加载的内容。
所以这就是我如何解决这个问题……
$(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有标签 – 似乎工作正常，没有让我感到困惑…