动态添加 DOM 元素后，轨道滑块无法设置动画

Question

我的页面上基本上有一个滑块，它在加载后立即运行良好。当我在 DOM 加载并附加新数据后重新加载 orbit-container 时，问题就出现了。

基本上，该方法是使用 $(".orbit-container").empty() 然后使用 append() 添加 li 元素。这样做之后，只显示最后一个元素，它不再滑动了。

我试过上面的方法，还清空了整个 div 并重新加载了整个轨道容器。

下面是我在 JSFiddle 上粘贴的示例代码。

$(document).ready(function(){
    $(document).foundation();
    });   

    function sampleScript(a) {
 
    $(".orbit-container").empty();
    $(".orbit-container").append('<li class="orbit-slide" style="text-align: center;"><img src="https://www.technobuffalo.com/sites/technobuffalo.com/files/styles/large/public/wp/2016/10/google-pixel-sample-photos-edited-054.jpg?itok=kSqq1XId" width="400" height="400"></li>');
    $(".orbit-container").append('<li class="orbit-slide" style="text-align: center;"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ5SEu48v57mH7lJBGMzQmnPyYHAqHTVKpJ4gLb1_qv8clUvY-6" width="400" height="400"></li>');
    $(".orbit-container").append('<li class="orbit-slide" style="text-align: center;"><img src="https://images.unsplash.com/photo-1503327431567-3ab5e6e79140?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80" width="400" height="400"></li>');


    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.3/css/foundation.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.1.1/motion-ui.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.3/js/foundation.js"></script>
    <div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit
    data-options="animation:slide;
                        pause_on_hover:true;
                  animation_speed:500;
                  navigation_arrows:true;
                  bullets:false;
                          timer_speed: 5000;
                          resume_on_mouseout: true;
                          data-swipe: true;
    ">
    <div class="orbit-wrapper">
    <div class="orbit-controls">
      <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button>
      <button class="orbit-next {color: red;}"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button>
    </div>
    <ul class="orbit-container" style="height:400px;">
        <li class="orbit-slide" style="text-align: center;" >
       
                    sample v
              
        </li>
        <li class="orbit-slide" style="text-align: center;" >
        
                sample w
               
        </li>
    
        <li class="orbit-slide" style="text-align: center;">
       
                    sample x
             
        </li>
        </ul>
          </div>
    </div><br><br>
    <button onClick="sampleScript('test 1')">
    Test button
    </button>

我基本上希望在 append 函数之后创建滑块元素并且它的动画方式与我第一次加载页面时的动画方式相同，但它只加载最后一张图像并且不再滑动.

有点卡住了。很想得到一些关于我在这里做错的提示。

Answer 1

解决此问题的解决方案

$(document).ready(function () {
  $('#orbit-container').foundation();
});
function sampleScript() {

  $("#orbit-container li").empty();
  $("#orbit-container li:nth-child(1)").append('<img src="https://www.technobuffalo.com/sites/technobuffalo.com/files/styles/large/public/wp/2016/10/google-pixel-sample-photos-edited-054.jpg?itok=kSqq1XId" width="400" height="400">');
  $("#orbit-container li:nth-child(2)").append('<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ5SEu48v57mH7lJBGMzQmnPyYHAqHTVKpJ4gLb1_qv8clUvY-6" width="400" height="400">');
  $("#orbit-container li:nth-child(3)").append('<img src="https://images.unsplash.com/photo-1503327431567-3ab5e6e79140?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80" width="400" height="400">');
  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.3/css/foundation.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.1.1/motion-ui.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.3/js/foundation.min.js"></script>
<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit data-options="animation:slide;
                        pause_on_hover:true;
                  animation_speed:500;
                  navigation_arrows:true;
                  bullets:false;
                          timer_speed: 5000;
                          resume_on_mouseout: true;
                          data-swipe: true;
    ">
  <div class="orbit-wrapper">
    <div class="orbit-controls">
      <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button>
      <button class="orbit-next {color: red;}"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button>
    </div>
    <button onClick="sampleScript()">
      Test button
    </button>
    <ul id="orbit-container" style="height:400px;" data-orbit>
      <li class="orbit-slide" style="text-align: center;">
        sample v
      </li>
      <li class="orbit-slide" style="text-align: center;">
        sample w
      </li>
      <li class="orbit-slide" style="text-align: center;">
        sample x
      </li>
    </ul>
  </div>
</div>

动态添加 DOM 元素后，轨道滑块无法设置动画

Orbit slider fails to animate after adding DOM element dynamically

html

jquery

zurb-foundation

orbit