动态渲染 html,第一次渲染删除后再次实例化viewer无效

点点乐淘淘
  • 332

完整代码如下:

`<!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>`

image.png
第一次点击显示按钮,会动态渲染li到ul中,点击图片可以查看放大效果
点击隐藏会把li结构删掉
第二次点击显示按钮,会再次动态渲染li到ul中,但这次点击图片就没有放大效果了

求高手解答为什么会这样

回复
阅读 1.9k
2 个回答

记得当时调用了detory()方法,把实例彻底销毁

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏