动态渲染 html，第一次渲染删除后再次实例化viewer无效
完整代码如下：
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>viewer.js</title>
<link rel="stylesheet" href="assets/css/reset.css">
<link rel="stylesheet" href="assets/css/viewer.min.css">
<style>
.mask{ width: 100%; height: 100%; position: fixed; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0,0,0,0.5); z-index: 1; display: none; }
.docs-pictures{ width: 600px; height: 600px; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; }
.docs-pictures>li{ width: 200px; height: 200px; float: left; }
.docs-pictures>li>img{width: 100%; height: 100%;}
.btn-area{ position: fixed; left: 10px; top: 10px;z-index: 99; }
button{padding:5px 10px; }
</style></head>
<body>
<div class="btn-area">
<button id="showAction">显示</button>
<button id="hiddenAction">隐藏</button>
</div>
<div class="mask">
<ul class="docs-pictures clearfix"></ul>
</div>
<script src="assets/js/jquery1.11.3.min.js"></script>
<script src="assets/js/viewer-jquery.min.js"></script>
<script>
var htmlStr = `<li><img data-original="https://fengyuanchen.github.io/viewerjs/images/tibet-1.jpg" src="https://fengyuanchen.github.io/viewerjs/images/thumbnails/tibet-1.jpg" alt="Cuo Na Lake"></li>
<li><img data-original="https://fengyuanchen.github.io/viewerjs/images/tibet-2.jpg" src="https://fengyuanchen.github.io/viewerjs/images/thumbnails/tibet-2.jpg" alt="Tibetan Plateau"></li>
<li><img data-original="https://fengyuanchen.github.io/viewerjs/images/tibet-3.jpg" src="https://fengyuanchen.github.io/viewerjs/images/thumbnails/tibet-3.jpg" alt="Jokhang Temple"></li>
<li><img data-original="https://fengyuanchen.github.io/viewerjs/images/tibet-4.jpg" src="https://fengyuanchen.github.io/viewerjs/images/thumbnails/tibet-4.jpg" alt="Potala Palace 1"></li>
<li><img data-original="https://fengyuanchen.github.io/viewerjs/images/tibet-5.jpg" src="https://fengyuanchen.github.io/viewerjs/images/thumbnails/tibet-5.jpg" alt="Potala Palace 2"></li>
<li><img data-original="https://fengyuanchen.github.io/viewerjs/images/tibet-6.jpg" src="https://fengyuanchen.github.io/viewerjs/images/thumbnails/tibet-6.jpg" alt="Potala Palace 3"></li>
<li><img data-original="https://fengyuanchen.github.io/viewerjs/images/tibet-7.jpg" src="https://fengyuanchen.github.io/viewerjs/images/thumbnails/tibet-7.jpg" alt="Lhasa River"></li>
<li><img data-original="https://fengyuanchen.github.io/viewerjs/images/tibet-8.jpg" src="https://fengyuanchen.github.io/viewerjs/images/thumbnails/tibet-8.jpg" alt="Namtso 1"></li>
<li><img data-original="https://fengyuanchen.github.io/viewerjs/images/tibet-9.jpg" src="https://fengyuanchen.github.io/viewerjs/images/thumbnails/tibet-9.jpg" alt="Namtso 2"></li>`
$('#showAction').on('click', function() {
$('.docs-pictures').html(htmlStr)
$('.mask').fadeIn(0)
$('.docs-pictures').viewer({
url: 'data-original'
})
})
$('#hiddenAction').on('click', function() {
$('.docs-pictures').html('')
$('.mask').find('.viewer-container')[0].remove()
$('.mask').fadeOut(0)
})
</script></body>
</html>`
第一次点击显示按钮，会动态渲染li到ul中，点击图片可以查看放大效果
点击隐藏会把li结构删掉
第二次点击显示按钮，会再次动态渲染li到ul中，但这次点击图片就没有放大效果了
求高手解答为什么会这样
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
记得当时调用了detory()方法，把实例彻底销毁
同问，请问楼主大大解决了没