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');时，点击后整个文档就会被删除。

这是布局：

enter image description here

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

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

对于显示的页面有效，它试图点击创建问题的其他页面！

感谢您的帮助。

Answer 1

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

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

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

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

Answer 2

hej webDevHed

首先

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

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

所以我没有访问marcup所以我不知道这里错了但是 .load是异步的，所以如果第二次调用需要插入第一个markupp，那么如果在第一次调用之前返回它将会失败。（这是一种竞争条件，所以你会得到不一致的结果）

如果他们相互依赖，你可以像这样写

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

希望这会有所帮助

Answer 3

我不知道这是不是你正在锁定的但是不好试一试（注意这是评论中跟进问题的一个问题）

所以这是之前的代码。

// 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

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

3 个答案: