Jquery 动态页面加载正在清除后续页面

我有这个问题。。。我有五个单独的页面要加载，在每个页面上我有两个动态加载来交换一些div的内容。内容的动态加载工作得很好，直到我尝试并介绍了将要打开的html页面的加载

代码：

resFix是我制作的一个div，它包围了body标记层下的整个文档#contentAll是主要的内容加载，而#textWelcome是正确的导航链接

尝试加载（'nonSurgicalProcedures.html'）单击时，整个文档将被清除

布局如下：

让我补充一点，我有一个单独的登录页作为index.html（有点像背景滚动广告），我知道只需使用：

$(document).ready(function(){
    $(function ()
    {
        $('.swapConsultationsLink').click(function()
        {
            $('#contentAll').load('dynamicPages/ns_consultations.html');
            $('#textWelcome').load('dynamicPages/ns_links.html');
        })
    });
});

对于显示的页面，它正在尝试单击另一个创建问题的页面

---

感谢您的帮助。

加载函数用加载的内容替换元素中的任何内容。在您的情况下，由于.resFix包含所有数据，因此一旦调用加载，其中的现有内容将替换为从nonSurgicalProcedures.html加载的内容

此外，如果要在动态加载的DOM元素上调用事件，则需要使用live（）函数：

否则，如果目标是已删除的DOM元素，则不会触发加载事件。（通过您重新加载内容）

hej webDevHed

所以首先

$(document).ready(function(){
 $(function ()
  {

这两个回调做同样的事情，你不需要两者都做

所以我没有访问marcup的权限，所以我无法判断这里出了什么问题，但是 .load是异步的，因此，如果第二个调用要求插入第一个markupp，那么如果在第一个markupp之前返回，则会失败。（这是一个竞赛条件tho，因此您将获得不一致的结果）

如果他们彼此依赖，你可以这样写

$(function () {
  $('.swapConsultationsLink').click(function() {
   $('.resFix').load('nonSurgicalProcedures.html', function() {
    $('#contentAll').load('dynamicPages/ns_consultations.html', function() {
     $('#textWelcome').load('dynamicPages/ns_links.html');
    });
   });
  });
});

---

希望这有帮助

我不知道这是否正是您锁定的目的 但我会尝试一下（注意这是对评论中后续问题的回答）

因此，这是一个比以前多得多的代码

// so you can write this without this function but
// its a nice abstraction it fetches all your pages and
// notifies you when its done
 var getManny = function(urls, cb) {
  var res = {},
        fetched = 0;
  $(urls).each(function(i, url) {
    $.get(url, {}, function(page) {
      res[url] = page;
      fetched++;
      if(fetched === urls.length) {
       cb(res);
      }      
    });
  });
};

$(function() {

 // your urls i give them a var here sins i am going to reference them    
 // mutliple times
 var nonSurgicalProcedures  = 'nonSurgicalProcedures.html',
     ns_consultations       = 'dynamicPages/ns_consultations.html',
     ns_links               = 'dynamicPages/ns_links.html';

 // binding the click event
 $('.swapConsultationsLink').click(function() {
  // fetching all the pages
  getManny([nonSurgicalProcedures, ns_consultations, ns_links], function(pages) {

   // removes the content in the .resFix ...... needed?
   $(".resFix").html("");

   // here i put the "nonSurgicalProcedures" in an empty div
   // so i can manupulate it in memory
   $("<div />").html(pages[nonSurgicalProcedures])
     // here i find the #conentAll and insert the "ns_consultations" page
     .find('#contentAll').html(pages[ns_consultations]).end()
     // here i find the #textWelcome and insert the "ns_links" page
     .find('#textWelcome').html(pages[ns_links]).end()
     // here i insert every thing thats in the div to .resFix
     .children().appendTo('.resFix');

  });
 });
});

//因此您可以在不使用此函数的情况下编写此函数，但是
//这是一个很好的抽象，它可以获取所有页面和
//完成后通知您
var getManny=函数（URL、cb）{
var res={}，
取数=0；
$（url）。每个（函数（i，url）{
$.get（url，{}，函数（第页）{
res[url]=页面；
获取++；
if（fetched==url.length）{
cb（res）；
}      
});
});
};
$（函数（）{
//你的网址，我给他们一个变量在这里，我要引用他们
//多次
var nonSurgicalProcedures='nonSurgicalProcedures.html'，
ns_consultations='dynamicpage/ns_consultations.html'，
ns_links='dynamicpage/ns_links.html'；
//绑定单击事件
$（'.swapConsultationsLink'）。单击（函数（）{
//获取所有页面
getManny（[非手术程序，ns_咨询，ns_链接]，功能（页）{
//删除.resFix…中的内容需要吗？
$（“.resFix”）.html（“”）；
//这里我把“非手术程序”放在一个空的div中
//这样我就可以在记忆中操纵它了
$（“”）.html（页面[非手术程序]）
//在这里，我找到了#conentAll并插入了“ns#U咨询”页面
.find（'#contentAll'）.html（第[ns#u]页）结束（）
//在这里，我找到了#文本Welcome并插入了“ns#U链接”页面
.find（'#textWelcome'）.html（页面[ns_链接]）.end（）
//在这里，我将div中的所有内容都插入到.resFix
.children（）.appendTo（'.resFix'）；
});
});
});

---

我希望这对你有用webDevHead

我的朋友工作得很有魅力，非常感谢@megakorre，不过我有一个小问题。nonSurgicalProcedures.html页面实际上在该页面上有编码的内容，它会闪烁一秒钟，然后加载其他动态div。我该如何隐藏原始内容或加速转换？使用$.get函数将其作为普通字符串获取这需要som状态管理我不知道你的att js有多好？是的@megakorre，我一直在绞尽脑汁让它工作，而不让加载页面的剩余部分可见。你知道我在哪里可以看到一个使用中的例子吗？很遗憾，上面的代码正在抹掉整个页面。。。你介意看一看JSFIDLE吗？hej WebDevHed它在fiddle上不起作用，因为它无法访问您要获取的文件，但我尝试自己下载页面并在我的机器上本地运行，效果很好。我没有ns_*的内容，所以我为他们制作了一个包含h1的文件。我将分享一个指向我工作的东西的链接（注意，只有firefox（不是chrome）允许你获取本地文件：D）

// so you can write this without this function but
// its a nice abstraction it fetches all your pages and
// notifies you when its done
 var getManny = function(urls, cb) {
  var res = {},
        fetched = 0;
  $(urls).each(function(i, url) {
    $.get(url, {}, function(page) {
      res[url] = page;
      fetched++;
      if(fetched === urls.length) {
       cb(res);
      }      
    });
  });
};

$(function() {

 // your urls i give them a var here sins i am going to reference them    
 // mutliple times
 var nonSurgicalProcedures  = 'nonSurgicalProcedures.html',
     ns_consultations       = 'dynamicPages/ns_consultations.html',
     ns_links               = 'dynamicPages/ns_links.html';

 // binding the click event
 $('.swapConsultationsLink').click(function() {
  // fetching all the pages
  getManny([nonSurgicalProcedures, ns_consultations, ns_links], function(pages) {

   // removes the content in the .resFix ...... needed?
   $(".resFix").html("");

   // here i put the "nonSurgicalProcedures" in an empty div
   // so i can manupulate it in memory
   $("<div />").html(pages[nonSurgicalProcedures])
     // here i find the #conentAll and insert the "ns_consultations" page
     .find('#contentAll').html(pages[ns_consultations]).end()
     // here i find the #textWelcome and insert the "ns_links" page
     .find('#textWelcome').html(pages[ns_links]).end()
     // here i insert every thing thats in the div to .resFix
     .children().appendTo('.resFix');

  });
 });
});