Flickity：动态创建的新轮播无法初始化问题求助

嘿，我一眼就看出问题出在哪了——你之前定义的$carousel变量，从始至终只绑定了页面加载时的第一个轮播元素。哪怕你销毁了旧轮播、添加了新的，最后执行$carousel.flickity()的时候，还是只在操作原来那个旧轮播，新添加的轮播根本没被初始化，当然没法正常工作啦！

解决方案 #

核心思路就是：每次添加新轮播后，要重新获取所有轮播元素，或者单独初始化新添加的那个。下面给你两种可行的修改方案：

方案一：重新初始化所有轮播（简单直观） #

这种方式适合轮播数量不多的场景，代码改动最小：

<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>

<style>
* { 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;
}
.carousel-cell:before {
  display: block;
  text-align: center;
  content: counter(carousel-cell);
  line-height: 200px;
  font-size: 80px;
  color: white;
}
</style>

<script>
// 初始化页面初始的轮播
let $carousels = $('.carousel').flickity();

$(document).on("click", "#button", function (e) {
  // 先销毁所有已存在的轮播实例
  $carousels.flickity('destroy');
  
  // 构建新轮播的HTML模板（用模板字符串更易读）
  const 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>
  `;
  
  // 添加新轮播到页面
  $(template).appendTo('body');
  
  // 重新获取所有轮播元素，初始化Flickity
  $carousels = $('.carousel').flickity();
});
</script>

方案二：只初始化新添加的轮播（更高效） #

如果页面轮播数量较多，重复初始化所有轮播会浪费性能，那就单独初始化新添加的那个：

$(document).on("click", "#button", function (e) {
  // 销毁所有已存在的轮播实例
  $carousels.flickity('destroy');
  
  const 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>
  `;
  
  // 添加新轮播并保存到变量
  const $newCarousel = $(template).appendTo('body');
  
  // 单独初始化新轮播
  $newCarousel.flickity();
  
  // 更新$carousels变量，包含所有轮播
  $carousels = $('.carousel');
});

关键改动点说明 #

1. 变量更新：把原来的$carousel改成$carousels，更贴合它代表多个轮播的含义，避免混淆
2. 重新获取元素：每次添加新轮播后，必须重新通过$('.carousel')获取元素，确保新元素被包含进来
3. 模板优化：用ES6的模板字符串（反引号`）代替字符串拼接，代码可读性更高，还不用转义HTML标签

这样修改后，不管你点击多少次按钮，新添加的轮播都能正常工作啦！

内容的提问来源于stack exchange，提问作者ltjfansite