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

最新推荐文章于 2022-06-28 16:02:54 发布

原创最新推荐文章于 2022-06-28 16:02:54 发布 · 679 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js on() #图片放大消失 #动态生成元素属性失效 #事件委托

SJF - JS 专栏收录该内容

7 篇文章

订阅专栏

本文详细探讨了在jQuery中正确处理动态生成元素的点击事件，通过事件委托解决了弹出产品列表框上的图片点击放大功能失效的问题。介绍了bind(), live(), on()的区别，展示了如何使用on()方法委托事件给父元素，确保动态生成的元素也能响应事件。

情景：需要在已经弹出的产品列表框上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