Flickity - 新动态创建的轮播未初始化答案

【问题标题】：Flickity - New dynamiclly created carousel not initialisingFlickity - 新动态创建的轮播未初始化
【发布时间】：2020-08-25 17:53:05
【问题描述】：

我想在我的页面上动态插入新的轮播，我添加了一个简化的测试用例来说明我想要做什么。唯一真正不同的是如何添加新的轮播，我的测试用例只是一个附加的字符串。但在我的项目中，这将是一个 ajax 请求。

无论如何，如您所见，我会在点击时销毁所有轮播，然后在添加新轮播后，我会尝试初始化新轮播和旧轮播。

问题是，新的不受影响。但旧的仍然有效。

有什么想法并让新的想法也起作用吗？

测试用例： https://codepen.io/jsayner/pen/ab06bdabd3d74afc5e84cb7730d21b52

// external js: flickity.pkgd.js
var $carousel = $('.carousel').flickity();


$(document).on("click", "#button", function (e) {
  $carousel.flickity('destroy');
  var template = "<div class='carousel'>"
                + "<div class='carousel-cell'></div>"
                + "<div class='carousel-cell'></div>"
                + "<div class='carousel-cell'></div>"
                + "<div class='carousel-cell'></div>"
                + "<div class='carousel-cell'></div>"
              + "</div>";
  
  $("body").append(template);
  $carousel.flickity();
});

/* external css: flickity.css */

* { box-sizing: border-box; }

body { font-family: sans-serif; }

.carousel {
  background: #FAFAFA;
}

.carousel-cell {
  width: 66%;
  height: 200px;
  margin-right: 10px;
  background: #8C8;
  border-radius: 5px;
  counter-increment: carousel-cell;
}

/* cell number */
.carousel-cell:before {
  display: block;
  text-align: center;
  content: counter(carousel-cell);
  line-height: 200px;
  font-size: 80px;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.js"></script>
<link href="https://unpkg.com/flickity@2/dist/flickity.css" rel="stylesheet"/>


<button id="button" type="button">show carousel</button>

<div class="carousel">
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
</div>

【问题讨论】：

标签： javascript flickity

【解决方案1】：

你应该改变 $carousel.flickity(); 至 $('.carousel').flickity();

变量 $carousel 只是你第一次初始化 flickity 时的实例，所以对添加的元素不起作用。

【讨论】：