替换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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.0.5/flickity.pkgd.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.0.5/flickity.min.css">
<button class="button">Re Create Flickity</button>
<div class="boxgallery">
<div class="gallery">
<div class="gallery-cell"></div>
<div class="gallery-cell"></div>
<div class="gallery-cell"></div>
</div>
<div class="gallery">
<div class="gallery-cell"></div>
<div class="gallery-cell"></div>
</div>
<div class="gallery">
<div class="gallery-cell"></div>
<div class="gallery-cell"></div>
<div class="gallery-cell"></div>
<div class="gallery-cell"></div>
</div>
</div>

演示：http://jsfiddle.net/74bcqf6x/

Answer 1

查看有关打开和关闭Flickity的销毁演示但我认为你最好使用调整大小的