DOM 将 slick-carousel 的 html 更改为 ajax 后未更新

Question

我的 slick carousel 在正文中定义为：

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

DOM 将 slick-carousel 的 html 更改为 ajax 后未更新

DOM not updating after changing slick-carousel's html with ajax

javascript

jquery

slick.js