동적 페이지로드가 내 계속되는 페이지를 닦아 내고 있습니다

Question

이 문제가 있습니다 ... 각 페이지에로드하고자하는 5 개의 별도 페이지가 있습니다. 두 개의 동적로드가있어 일부 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

I는 그 신체 태그 층 아래의 문서 전체를 둘러싸고 이루어지는 DIV이다. #content 모두 주요 콘텐츠로드이며 #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

(내용의 당신의 재로드를 통해)

그래서 처음

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

이 두 콜백은 그나마 같은 일이 그래서는 marcup에 액세스 할 수 그나마 모두

을해야합니까 그래서 여기서 뭐가 잘못 됐어?하지만 .load는 비동기 적으로 두 번째 호출이있을 경우 첫 번째 markupp가 삽입 되었다면 첫 번째 호출 전에 삽입 된 첫 번째 markupp가 실패합니다.그들은 서로에 의존하는 경우

이

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

희망처럼 쓸 수 있습니다 (당신이 unconsistent 결과를 얻을 수 있도록이 경쟁 조건의 상점은)이

Answer 2

로드 함수는 요소 내에있는 내용을로드 된 내용으로 바꿉니다. 귀하의 경우에는 .resFix에 모든 데이터가 포함되어 있기 때문에로드를 호출하자마자 그 안에있는 기존 콘텐츠가 nonSurgicalProcedures.html에서로드되는 콘텐츠로 대체됩니다.

또한 원하는 경우 동적으로로드 된 DOM 요소의 이벤트를 호출하는 당신은 라이브() 함수를 사용해야합니다 : 당신이 제거 된 DOM 요소를 대상으로하는 경우

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

그렇지 않으면로드 이벤트가 발생하지 않습니다. HEJ이 webDevHed

Answer 3

내가이 있는지 알고 해달라고하는 데 도움이 정확하게 당신이 을 위해 잠그고있는 것입니다. 그러나 그것을 시도해보십시오. (이것은 메모에서 후속 질문에 대한 anser입니다.)

그래서 이것은 이전보다 더 많은 코드입니다. 나는 그러나 하나의 작은 문제가 있나요 @megakorre

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

    }); 
}); 
}); 

내가, 당신은 내 친구가 마법처럼 일했다