Reload flickity after replace html

Question

I run multiple flickity and it is correctly run in the first html code. while the .boxgallery replace with new html .boxgallery after click on button, isn't correct run flickity.

what do i do? (Unchanged 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>

DEMO: http://jsfiddle.net/74bcqf6x/

Answer 1

See the destroy demos for toggling Flickity on and off But I think you're better off using resize