Question

单击图像缩略图时，我使用以下代码创建overlay div：

<script type="text/javascript">
jQuery(document).ready(function(){


    jQuery(".test-popup-link").click(function(e) {

       var overlay = jQuery('<div align="center" id="overlay"><img id="imgBig" src="" /></div>');
overlay.appendTo(document.body);
//jQuery('#overlay').load(this.href);

var imgs = (this.href);

jQuery('#overlay #imgBig').attr("src", imgs)
        return false;
    });




});


</script>

这很好用。

现在，当用户点击ID为img的{{1}}时，我需要删除或隐藏重叠div。所以我试过了：

imgBig

但由于某些原因它只是没有效果，这意味着它不会隐藏/删除<script> jQuery(document).ready(function(){ jQuery( "#overlay #imgBig" ).click(function() { jQuery("#overlay").remove(); }); return false; }); </script> div！

有人可以就此问题提出建议吗？

提前致谢。

Answer 1

点击功能不适用于动态创建的元素。此外，id是唯一的，因此您只需要在选择器中使用#imgBig。

试试这个：

jQuery(document).ready(function(){

        jQuery( "#imgBig" ).on('click', function() {
            jQuery("#overlay").remove();
        });

           return false;
});

Answer 2

你应该在第一个函数中使用第二部分，就像这样（我用$替换了Jquery）：

...  
var imgs = (this.href);

    $('#overlay #imgBig').attr("src", imgs);


    $( "#overlay #imgBig" ).click(function() {
        $("#overlay").remove();
    });
    return false;

JSFiddle示例： JSFiddle

Answer 3

现在我需要在用户点击时删除或隐藏重叠div id为imgBig
的img

尝试将click事件分配给img设置为src的{{1}}元素

imgs

Answer 4

问题是on()或click()功能不适用于动态生成的HTML内容。以前您可以使用live()方法，但目前在jQuery中已弃用。幸运的是，on()方法接受第二个参数，特别是对于这些情况。所以你可以使用：

jQuery( "body" ).on( 'click', '#imgBig', function() {
  jQuery("#overlay").remove();
});

这是一个小提琴：http://jsfiddle.net/y5y1x5vm/

希望能解决你的问题。

jQuery：删除或隐藏重叠div？

4 个答案: