動的ページの読み込みは、私の次のページをワイプアウトしています

Question

私はこの問題を持っています...私はいくつかのdivの内容を交換するために2つの動的な負荷がある各ページで、ロードしたい5つの別々のページがあります。コンテンツの動的読み込みは、うまくいくまでうまく動作します.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は、私はそれがbodyタグの層の下に、文書全体を取り囲んで作られた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は、これら二つのコールバックは、あなたはので、私はmarcupへのアクセス権を持っていけないの両方

を必要といけないと同じことを行う

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

ので、最初

をwebDevHedここで何が間違っているのですか？ .loadはasyncなので、2番目の呼び出しでは最初のmarkuppが挿入されていれば、最初のmarkuppが挿入されています。彼らはあなたがこれは私がこの場合は知らない

Answer 2

load関数は、要素内の内容をロードされた内容に置き換えます。あなたのケースでは、.resFixにすべてのデータが含まれているので、その中の既存のコンテンツはnonSurgicalProcedures.htmlからロードされているコンテンツに置き換えられます。

また、動的にロードされたDOM要素にイベントを呼び出すために、あなたはライブ（）関数を使用する必要があります：あなたが削除されたDOM要素をターゲットにしている場合

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

そうでない場合は、ロード・イベントは発生しません。 （コンテンツのあなたのリロードを通じ）

Answer 3

を助け、この

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

希望のようにそれを書くことができ、相互に依存しない場合

（あなたがunconsistent結果が得られますカントーこれは競合状態です）ちょうどあなたが のためにロックしているものですが、それは試してみてください（これは、コメントの後に質問へのアンサーに注意してください）

これは、

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

    }); 
}); 
}); 

私はあなたが私の友人が魅力のように働いた、本当にありがとうございました@megakorreが、私はしかし、1つのマイナーな問題を持っているん