jQuery的追加HTML載入隨機頁面上reresh

Question

我有一個這樣的問題：

我在我的網站上使用jQuery的plugin fullPage.js阿爾瓦羅·特里戈。該插件腳本自動插入某些元素的HTML結構......在我的HTML我有：

<div class="section fp-auto-height-responsive" id="slider-section"> 
    <div class="slide" id="co-delame-section"> 
     <div class="slide-wrapper"> 
     ... 
     </div>  
    </div> 
    </div> 

和頁面加載時，JavaScript的產生多餘的HTML標記和CSS，所以它看起來像：

<div class="section fp-auto-height-responsive fp-section active fp-completely" id="slider-section" data-anchor="About" style="height: 638px;">  
 
    <div class="fp-slides"> 
 
    <div class="fp-slidesContainer" style="width: 100%;"> 
 
     <div class="slide fp-slide fp-table active" id="co-delame-section" style="width: 100%;"> 
 
     <div class="fp-tableCell" style="height:638px;">  
 
      <div class="slide-wrapper">  
 
      </div>   
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div>    
 
</div>

我想爲某個頁面的分辨率追加更多的幻燈片（Slide類），這樣當用戶在與小屏幕的移動，額外的幻燈片將不會加載。

我這個javascript代碼做到這一點：

$.get("http://marketingo.cz/wp-content/themes/twentysixteen-child/slider_cs.html", function (data) { 
 
    $("#slider-section").append(data); 
 
    });

而且還有問題......它在大約50％的頁面加載，問題是，有時追加幻燈片在fullPage生成結構後，以便附加的幻燈片不在滑塊結構中...像這樣：

<div class="section fp-auto-height-responsive fp-section active fp-completely" id="slider-section" data-anchor="About" style="height: 638px;">  
 
    <div class="fp-slides"> 
 
    <div class="fp-slidesContainer" style="width: 100%;"> 
 
     <!-- the right place of a slide --> 
 
     <div class="slide fp-slide fp-table active" id="co-delame-section" style="width: 100%;"> 
 
     <div class="fp-tableCell" style="height:638px;">  
 
      <div class="slide-wrapper">  
 
      </div>   
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <!-- appended slides out of slider blocks --> 
 
    <div class="slide" id="jsme-partner">       
 
    </div>          
 
    <div class="slide" id="vase-problemy">         
 
    </div> 
 
</div>

所以看起來幻燈片追加前的腳本運行fullPage.js，但在HTML head標籤我首先把劇本追加幻燈片和全頁被加載後...

但什麼真的很奇怪，有時候它會正確加載，有時候不會。清除緩存刷新有時會幫助，但我不能說是否有任何刪除緩存的模式。

您可以檢查它http://marketingo.cz/en/?stack-overflow#About，並清除緩存，看看給它一些刷新...

的問題是 - 我怎麼能保證整頁顯示插件修改代碼之前，因此HTML被追加附加的滑塊將在同一個容器中？

感謝您的幫助！ :)

Answer 1

簡單。

您使用$.get回調追加的幻燈片後僅僅initialice fullPage.js。

$.get("http://marketingo.cz/wp-content/themes/twentysixteen-child/slider_cs.html", function (data) { 
    $("#slider-section").append(data); 

    //initialice fullPage.js here: 
    $('#fullpage').fullpage(); 
});