jq图片放大缩小

css部分：

.pic01{
            width: 100px !important;
            height: 100px;
        }
        .pic02{
            display: none;
        }
        .pic02 img{
            z-index: 11;
            width: 300px;
            height: 300px;
            position: fixed;
            top: 50%;
            margin-left: -150px;
            margin-top: -150px;
            left: 50%;
        }

js部分：

​
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>

    $(document).on('click','.pic01',function(){
        var picSrc =  $(this).attr('src');
        $('.pic02 img').attr('src',picSrc);
        console.log(4555)
        $('.pic02').show()
    });
    $(document).on('click','.pic02',function(){
        console.log("halou");
        $('.pic02').hide()
    })
</script>

​

 html部分：用js进行append渲染的，用$("#id").on('click',function)这种点击事件不行，需用上边js写法才可以