動態頁面加載正在消除我的後續頁面

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，我提出圍繞身體標記層的下部的全體文檔。 #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是異步的，所以如果第二次調用那裏要求第一個markupp被插入，它將失敗，如果它返回第一個之前。（這是一個競爭條件壽所以你會得到unconsistent結果）

如果他們互相依賴，你可以把它寫這樣

$(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元素的事件，那麼你將需要使用活的（）函數：

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

否則，如果你的目標已被刪除的DOM元素的加載事件將不會觸發。 （通過你的內容重新加載）

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