替换html后重新加载flickity

Question

我运行了多个 flickity，它在第一个 html 代码中正确运行。虽然单击按钮后.boxgallery替换为新的 html .boxgallery，但运行 flickity 并不正确。

我该怎么办？（不变的replaceWith js）

var $carousel = $('.gallery').flickity();

var isFlickity = true;

$('.button').on( 'click', function()

{

    //Clearing previous contents

    $carousel.flickity('destroy');

  

    $('.boxgallery').replaceWith('<div class="boxgallery"><div class="gallery"><div class="gallery-cell"></div><div class="gallery-cell"></div><div class="gallery-cell"></div></div></div>');

    // init new Flickity

    $carousel.flickity();

});

@import url(http://flickity.metafizzy.co/flickity.css);

* {

  box-sizing: border-box;

}

body {

  font-family: sans-serif;

}

.gallery {

    width: 200px;

    background: #FAFAFA;

    margin-bottom: 30px;

    counter-reset: gallery-cell;

    float: right;

    margin: 10px;

}

.gallery-cell {

  width: 100%;

  height: 160px;

  margin-right: 20px;

  background: #8C8;

  counter-increment: gallery-cell;

}

.gallery-cell:before {

  content: counter(gallery-cell);

  display: block;

  text-align: center;

  line-height: 160px;

  font-size: 80px;

  font-weight: bold;

  color: white;

}

.gallery-nav {

  list-style: none;

  margin: 0;

  padding: 0;

}

.gallery-nav li {

  display: inline-block;

  font-size: 20px;

  color: #09F;

  border: 1px solid;

  padding: 10px;

  margin-right: 5px;

}

.gallery-nav li.is-selected {

  background: #09F;

  color: white;

}

.gallery-nav li:hover {

  background: #ADF;

  cursor: pointer;

}

Answer 1

我认为您最好使用调整大小