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

Question

我的光滑轮播在主体内部定义为:

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