问题
I'd like to know what's the way to load an html page (page1.html) into a div in webpage active (index.html) and then load another html page (page2.html) into a div that will be inside of page loaded (page1.html). I mean.
index.html
<div id="content"></div>
<a class="link" href="#">load</a>
script
$(document).ready(function() {
$('a.link').live('click', function() {
$('#content').load('page1.html', function(){
$('#content2').load('page2.html');
});
});
});
page1.html
<div id="content2"></div>
It's works fine for only 1 click, at the second click it loads page2.html for 0,5 seconds and then loads page1.html.
What's the problem ???
Thank you
回答1:
The approach you have taken feels wrong. If you have no choice but to populate the page using this multiple ajax request approach, try explicitly populating the content div with the data from page 1 first, before going on to populating content2. This will mean you can't use the .load selector, and will need to do a regular ajax request, eg:
$(document).ready(function() {
$('a.link').live('click', function() {
$.ajax({
url : 'page1.html',
success: function(data){
$('#content').html(data);
$('#content2').load('page2.html');
}
});
});
});
回答2:
Using your code samples I can not reproduce the error -or I should call it "bug"?- using jQuery 1.6.4 on Chrome, Firefox and even IE8.
What I noticed is a unexpected behavior with Browser cache enabled. Source changes made on Page1.html where not fetched from server after the very first click on the link. I would recommend you to disable browser cache with Firebug or Chrome Developer Tools and do your tests again.
Also, please try with an updated version of jQuery, or at least the same version I'm using from http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js.
Is any of the above does not work, try to set a delay to fetch page2.html.
$(document).ready(function() {
$('a.link').live('click', function() {
$('#content').load('page1.html', function(){
setTimeout("$('#content2').load('page2.html')", 250); // try diff. values
});
});
});
If that does not solves the problem, it would help to see the complete source of page1.html and page2.html.
回答3:
Try this.
<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>
In the success callback of the first request, I tried to load the responseHTML into a temp <div> and in the callback of the second request, I searched for the element p:last (in your case it will be #content2) and put the response of the second ajax request into it. Finally, put the combined data into #content.
For a demo, goto http://w3schools.com/ajax/tryit.asp?filename=tryajax_first and run the above code.
回答4:
your main page html
<body>
<a href="#" class="link">i load your page</a>
<div id="container-page1">
</div>
</body>
your page1 html
<div>
<p>i'm important text</p>
<div id="container-page2"></div>
</div>
jquery > version 1.7
I used an event firing because it keeps your javascript flat. Otherwise you can end up with some deeply nested code if you need to go 3 or 4 ajax calls deeper later on!
if your jQuery is < 1.7, then let me know and I can throw together .delegate / .live equivalents.
$(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'});
});
回答5:
With the latest JQuery, and run on Chrome, Firefox & IE 9, the following works perfectly fine:
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>
So I'd say that wither you don't have the latest version of jQuery, or that the problem is in something else inside page1 or page2.html
回答6:
If I am correct, you are trying to load onto the second secontainer, after first container is loaded
Add a simple class on your markup
<div id="content" class="toload"></div>
&
<div id="content2" class="toload"></div>
Now, here is the magical jQuery you need
$(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
});
});
});
回答7:
your answer works on my chrome, but try to empty the content to be sure that you are not having double #content elements
$(document).ready(function() {
$('a.link').live('click', function() {
$('#content:first').empty().load('page1.html', function(){
$('#content2').load('page2.html');
});
});
});
回答8:
Did you try to empty the #content first before you assign new content to it
$(document).ready(function() {
$('a.link').live('click', function() {
$('#content').empty();
$('#content').load('page1.html', function(){
...
回答9:
Try this:
$('a.link').live('click', function(e) {
e.preventDefault();
$('#content').load('page1.html', function(){
$('#content2').load('page2.html');
});
});
回答10:
You need to make sure that there's DOM element in your page1.html which you can quote as a selector in your index.html jQuery. So here's a layout you could use for page1.html:
<div id="content2">//id name changed
Content
</div>
In your index.html, use this jQuery:
$(function(){
$('a.link').live('click',function(){
$('#content').load('1.html', function(){
$('#content2').load('2.html');
});
});
});
If it's still flickering back and removing the 2.html inside #content2, see if you're clicking the link more than once. Also, use either FireBug or Chrome's Inspect Element tool to check all the Network transfers to see what's being loaded and what isn't.
回答11:
So here's how I would solve this problem...
$(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);
}
});
}
});
});
});
Slightly more code, but using the success and complete callback functions should give a bit more control over when these divs are populated. In my example, index.html has the and page1.html has the tag - seems to work fine with no wonkiness for me...
来源：https://stackoverflow.com/questions/9394066/jquery-function-that-load-html-code-into-a-div-and-then-load-other-content-into