动态页面加载正在清除我随后的页面

Question

我有这个问题...我有五个单独的页面要加载，在每个页面上我有两个动态加载来交换一些 div 的内容。内容的动态加载工作正常，直到我尝试引入将要打开的 html 页面的加载。

代码：

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

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

在尝试$('.resFix').load('nonSurgicalProcedures.html'); 时，单击时整个文档都会被清除。

这是布局：

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

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

对于显示的页面，它正在尝试单击导致问题的其他页面！

感谢您的帮助。

Answer 1

hej webDevHed

首先

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

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

所以我无法访问 marcup，所以我无法确定这里有什么问题，但是 .load 是异步的，因此如果第二次调用需要插入第一个标记，如果在第一个之前返回，它将失败。 （这是一个竞争条件，所以你会得到不一致的结果）

如果它们确实相互依赖，你可以这样写

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

希望对你有帮助

Answer 2

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

另外，如果你想在动态加载的 DOM 元素上调用事件，那么你需要使用 live() 函数：

http://api.jquery.com/live/

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

Answer 3

我不知道这是否正是您锁定的目的 但我试一试（注意这是对 cme​​ts 中后续问题的回答）

所以这比以前多了很多代码。

// 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');

  });
 });
});

我希望这对你 webDevHead 有用