javascript - 替换html后重新加载flickity
问题描述
我运行多个 flickity,它在第一个 html 代码中正确运行。虽然单击按钮后.boxgallery
用新的 html 替换,但运行 flickity 是不正确的。.boxgallery
我该怎么办?(不变的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/
解决方案
推荐阅读
- vba - Visio:如何改变形状的位置?
- angular - 角度更新后,我不断出现错误:Can't bind to 'xyz because it is not a known property of 'abc'
- r - 在R中读取大于RAM的表
- maven - 在 STS 中导入 Cumulocity 的“cumulocity-agents”项目后编译错误
- python - 返回新列中出现的顺序
- html - 如何在网页的下拉菜单中知道每年的具体网址
- python - 尝试创建一个基于列表生成可变数量字段的表单
- sql - 显示来自搜索 laravel 的结果
- batch-processing - 当通过邮递员提出停止请求时作业未停止
- java - 删除地图条目
>