js动态生成元素 on()属性失效问题（点击放大图片点击消失）

最新推荐文章于 2023-05-04 21:59:36 发布

steve_SJF

最新推荐文章于 2023-05-04 21:59:36 发布

阅读量583

点赞数

分类专栏： SJF - JS 文章标签： js on() 图片放大消失动态生成元素属性失效事件委托

本文链接：https://blog.csdn.net/steve_sjf/article/details/84101042

版权

SJF - JS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

情景：需要在已经弹出的产品列表框上1 ，再加一层点击放大弹出2。（见下图pop1， pop2）

失效js

jQuery(".tm-m-photo-viewer ").on("click","img",function(){
    var _this = jQuery(this);//将当前的img元素作为_this传入函数
    imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
});

尝试一通bind(),live(),on() 区别之后还是失效，而且on()是推荐使用的新的。

//bind $( "#members li a" ).on( "click", function( e ) {} ); $( "#members li a" ).bind( "click", function( e ) {} );

// Live $( document ).on( "click", "#members li a", function( e ) {} ); $( "#members li a" ).live( "click", function( e ) {} );

// Delegate $( "#members" ).on( "click", "li a", function( e ) {} ); $( "#members" ).delegate( "li a", "click", function( e ) {} );

修改后js

jQuery(.catalog-product-popup").on("click",".tm-m-photo-viewer img",function(){
    var _this = jQuery(this);//将当前的img元素作为_this传入函数
    imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
});

catalog-product-popup 是最开始存在但不显示的pop部分。效果成功。

问题的关键：动态生成的元素要通过事件委托来委托给父元素。本例委托给了弹框1未出现就已存在的 catalog-product-popup。

附上点击放大图片单独页面

<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script type="text/javascript" src="https://www.obido.cn/shop/skin/frontend/default/theme286k/js/jquery-1.10.2.min.js"></script>
<style>
      .img-div img{ width:100px; height:100px; }
      #outerdiv{ position:fixed; top:0; left:0; background:rgba(0,0,0,0.7); z-index:2; width:100%; height:100%; display:none; }
      #innerdiv{ position:fixed; z-index:3; display:none;}
      /* 此处上面 position 是 absolute 时就是相对于弹出框口的位置 */
      #bigimg{ border:5px solid #fff; }
  </style>
</head>

/*附上HTML*/
 <body>
<div class="tm-m-photo-viewer">
        <div class="img-div" id="mytest">  
            <img src="https://www.obido.cn/test/shop/media/catalog/product/2/_/2.jpg" class="pimg">
        </div>
</div>
<div id="outerdiv"></div>
 <div id="innerdiv">
    <img id="bigimg" src="#">
</div>

/*完整JS*/
<script>
    jQuery("body").on("click",".tm-m-photo-viewer img",function(){
        var _this = jQuery(this);//将当前的img元素作为_this传入函数
        imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
    });
    function imgShow(outerdiv, innerdiv, bigimg, _this){
        var src = _this.attr("src");//获取当前点击的pimg元素中的src属性  
        jQuery(bigimg).attr("src", src);//设置#bigimg元素的src属性
            /*获取当前点击图片的真实大小，并显示弹出层及大图*/
        jQuery("<img/>").attr("src", src).load(function(){
            var windowW = jQuery(window).width();//获取当前窗口宽度
            var windowH = jQuery(window).height();//获取当前窗口高度
            var realWidth = this.width;//获取图片真实宽度  
            var realHeight = this.height;//获取图片真实高度
            var imgWidth, imgHeight;  
            var scale = 0.8;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放  

            alert(windowH);
            alert(realHeight);

            if(realHeight>windowH*scale) {//判断图片高度
                imgHeight = windowH*scale;//如大于窗口高度，图片高度进行缩放
                imgWidth = imgHeight/realHeight*realWidth;//等比例缩放宽度  
                if(imgWidth>windowW*scale) {//如宽度扔大于窗口宽度  
                    imgWidth = windowW*scale;//再对宽度进行缩放  
                }  
            } else if(realWidth>windowW*scale) {//如图片高度合适，判断图片宽度  
                imgWidth = windowW*scale;//如大于窗口宽度，图片宽度进行缩放  
                            imgHeight = imgWidth/realWidth*realHeight;//等比例缩放高度  
            } else {//如果图片真实高度和宽度都符合要求，高宽不变  
                imgWidth = realWidth;  
                imgHeight = realHeight;  
            }  
            jQuery(bigimg).css("width",imgWidth);//以最终的宽度对图片缩放
            var w = (windowW-imgWidth)/2;//计算图片与窗口左边距  
            var h = (windowH-imgHeight)/2;//计算图片与窗口上边距
            jQuery(innerdiv).css("display","block");
            jQuery(innerdiv).css({"top":h, "left":w});//设置#innerdiv的top和left属性
            jQuery(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg
        });  
          
        jQuery(outerdiv).click(function(){//再次点击淡出消失弹出层
            jQuery(this).fadeOut("fast");
            jQuery(innerdiv).css("display","none");
        });  
    }
</script>
</body>
</html

steve_SJF

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
js动态生成元素 on()属性失效问题（点击放大图片点击消失）

情景：需要在已经弹出的产品列表框上1 ，再加一层点击放大弹出2。（见下图pop1， pop2）失效js jQuery(".tm-m-photo-viewer ").on("click","img",function(){ var _this = jQuery(this);//将当前的img元素作为_this传入函数 imgShow("#outerdiv", "#inn...
复制链接

扫一扫