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(); 
});