JS动态生成div元素时Flickity轮播组件无法正常触发问题求助

你遇到的问题主要由以下3个错误导致：

1. 资源加载逻辑错误：在document.ready回调中用document.write加载flickity.js是完全错误的写法，DOM加载完成后调用document.write会清空整个页面原有内容，就算没清空也会导致Flickity加载时序混乱。
2. 初始化时机错误：Flickity的data-flickity属性自动初始化只会在页面首次加载完成时执行一次，此时你的AJAX请求还没返回结果，轮播项还没插入到DOM中，Flickity扫描到空的轮播容器自然不会生成完整结构。
3. 选择器写法不规范：代码中直接用img_c、img_d调用DOM元素属于非标准写法，兼容性差。

完整修改后的代码如下：

<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>
    <!-- 提前引入flickity资源，不要动态加载 -->
    <script src="flickity.js"></script>
    <link rel="stylesheet" href="flickity.css">
</head>
<h1>Image slider with Thumbnails and Flickity - asNavFor</h1>

<div class="container">
<!-- 移除data-flickity自动初始化属性，后续手动初始化 -->
<div id="img_c" class="carousel carousel-main"></div>
<div id="img_d" class="carousel carousel-nav"></div>
</div><!-- /.container -->

<script>
var folder = 'img/';
var carousel = 'carousel-cell';
var img_thumb='120px';
$.ajax({
    url : folder,
    success: function (data) {
        // 先插入所有轮播项
        $(data).find('a').attr('href', function (i, val) {
            if (val.match(/\.(jpe?g|png|gif)$/)) { 
                $('<div class="'+carousel+'" ><img src="' + val + '"></div>').appendTo('#img_c');
                $('<div class="'+carousel+'" ><img src="' + val + '" width="'+img_thumb+'"></div>').appendTo('#img_d');
            } 
        });
        // 所有轮播项插入完成后，手动初始化Flickity
        $('.carousel-main').flickity({
            pageDots: false
        });
        $('.carousel-nav').flickity({
            asNavFor: '.carousel-main',
            contain: true,
            pageDots: false
        });
    }
});
</script>

• 把flickity.js放到head中静态引入，废弃document.write动态加载的写法
• 删除轮播容器上的data-flickity属性，改为AJAX插入完所有轮播项之后手动调用flickity()方法初始化
• 规范了DOM选择器和字符串拼接的引号包裹逻辑，避免语法错误

内容的提问来源于stack exchange，提问作者Vincent Van Klaus