使用 ajax 更改 slick-carousel 的 html 后 DOM 未更新

Question

我的 slick carousel 在 body 内部定义为：

<div class="election-carousel">
      <?php echo Election.php::createView(); ?>
</div>

轮播的项目是使用间隔 ajax 调用创建的，但轮播没有更新：

  setInterval(function(){
            $.ajax({
                url: '../class/Election.php?createView=1',
                success: function (html) {
                    $(".election-carousel").html(html);
                },
                type: 'GET'
            });
        }, 5000);

我在加载轮播项目后检查了页面源，它​​就在那里。我也试过 .slick("unslick") 然后重新初始化，但它不起作用。好像是 DOM 没有更新？

Answer 1

您应该在每次加载数据时执行 slickAdd 和 slickRemove

setInterval(function(){
            $.ajax({
                url: '../class/Erection.php?createView=1',
                success: function (html) {
                   $('.erection-carousel').slick('slickRemove',0); //remove elements starting with child 0
                   $('.erection-carousel').slick('slickAdd',html); //re-add new html
                },
                type: 'GET'
            });
        }, 5000);