【问题标题】：jquery function that load html code into a div and then load other content into div inside html loadedjquery函数将html代码加载到div中，然后将其他内容加载到html中的div中加载
【发布时间】：2012-02-22 11:40:06
【问题描述】：

我想知道如何将 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>

只需单击 1 次即可正常工作，第二次单击时会加载 page2.html 0.5 秒，然后加载 page1.html。

什么问题？？？

谢谢

【问题讨论】：

您确定吗，您的Page2 没有Page1 的重定向
此代码适用于我使用最新的 jQuery，检查您的 jQuery 版本或报告您使用的版本以及在哪个浏览器中它不起作用
请准备一个测试，不要等待社区入侵您的网站并找到解决方案。
克里斯托弗，我有时间就去做，不是吗？

标签： jquery function callback load

【解决方案1】：

感觉你采取的方法是错误的。如果您别无选择，只能使用这种多 ajax 请求方法填充页面，请先尝试使用页面 1 中的数据显式填充内容 div，然后再继续填充内容 2。这意味着您不能使用 .load 选择器，并且需要执行常规 ajax 请求，例如：

$(document).ready(function() {
    $('a.link').live('click', function() {

        $.ajax({
                url : 'page1.html',
                success: function(data){
                    $('#content').html(data);
                    $('#content2').load('page2.html');
                    }
                });
    });
});

【讨论】：

仍然有同样的问题，但是应用这个 ajax 方法很有用。谢谢
@GrahamB- 他正在使用第一次加载的成功回调来调用第二次，所以您的解决方案正在做同样的事情
我制作了一个小示例应用程序，并得到了我的方式和有趣的是，你原来的工作方式没有问题，所以我认为其他事情正在发生，你能从你的网站中提取确切的代码吗？在 jsfiddle 上使用并发布示例？您将不得不使用 $.post 模拟 html 响应，因此不幸的是它不是完全复制。

【解决方案2】：

使用您的代码示例我无法重现错误 - 或者我应该称之为“错误”？- 在 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 的完整源代码会有所帮助。

【讨论】：

【解决方案3】：

试试这个。

<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 加载到临时 <div> 中，在第二个请求的回调中，我搜索了元素 p:last（在您的情况下它将是 #content2 ) 并将第二个ajax请求的响应放入其中。最后将合并后的数据放入#content。

如需演示，请转到 http://w3schools.com/ajax/tryit.asp?filename=tryajax_first 并运行上述代码。

【讨论】：

【解决方案4】：

你的主页html

<body>
<a href="#" class="link">i load your page</a>
<div id="container-page1">
</div>
</body>

您的页面 1 html

<div>
   <p>i'm important text</p>
   <div id="container-page2"></div>
</div>

jquery > 1.7 版

我使用了一个事件触发，因为它使您的 javascript 保持平坦。否则，如果您以后需要更深入地进行 3 或 4 次 ajax 调用，最终可能会得到一些深度嵌套的代码！

如果您的 jQuery

$(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】：

使用最新的 JQuery，并在 Chrome、Firefox 和 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中的其他东西

【讨论】：

【解决方案6】：

如果我是正确的，您正试图在第一个集装箱装载后装载到第二个集装箱上

在你的标记上添加一个简单的类

<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
        });
    });
});

【讨论】：

第二个内容在第一个内容加载之前不存在。
@RaphaelD.G，我知道，只需更新课程，它存在的地方，最终都会解决。试试看吧

【解决方案7】：

您的答案适用于我的 chrome，但请尝试 empty 内容以确保您没有双重 #content 元素

$(document).ready(function() {
    $('a.link').live('click', function() {
        $('#content:first').empty().load('page1.html', function(){
            $('#content2').load('page2.html');
        });
    });
});

【讨论】：

【解决方案8】：

您是否尝试在分配新内容之前先清空#content

$(document).ready(function() {
   $('a.link').live('click', function() {
      $('#content').empty();
      $('#content').load('page1.html', function(){
      ...

【讨论】：

【解决方案9】：

试试这个：

$('a.link').live('click', function(e) {
   e.preventDefault();
   $('#content').load('page1.html', function(){
       $('#content2').load('page2.html');
   });
});

【讨论】：

测试自己 -> www.dielecsur.com/index_spa.php 然后单击底部页面站点地图中的 ventas href 选项。有一些广告，但我看不懂

【解决方案10】：

您需要确保 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 工具检查所有网络传输，以查看正在加载的内容和未加载的内容。

【讨论】：

我不明白为什么使用<div id='page2'>
测试自己 -> www.dielecsur.com/index_spa.php 然后点击底部页面站点地图上的 ventas href 选项。有一些广告，但我看不懂
Encabezados de petición Accept text/html, /; q=0.01 Accept-Charset ISO-8859-1,utf-8;q=0.7,*;q=0.7 Accept-Encoding gzip, deflate Accept-Language es-es,es;q=0.8,en-us;q= 0.5,en;q=0.3 Connection keep-alive Cookie PHPSESSID=uhjlefg9ldo5p6fq9pvdu75li3 Host dielecsur.com Referer dielecsur.com/index_spa.php?u=conan User-Agent Mozilla/5.0 (Windows NT 6.1; WOW64; rv:9.0.1) Gecko/20100101 Firefox/9.0.1 X-Requested-With XMLHttpRequest

【解决方案11】：

所以这就是我将如何解决这个问题...

    $(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 有标签 - 对我来说似乎工作正常......

【讨论】：