个人中心
gpt4 book ai didi

javascript - jquery 版本 1.9.0 及之后的灯箱不会消失

转载 作者：太空宇宙 更新时间：2023-11-04 12:09:47 25 4
gpt4 key购买 nike

所以我试着做了这个灯箱

CSS

#wrapper{
    width: 100%;}

#locandine{
    padding-top: 6%;
    width: 66.5%;
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;}

#locandine a{
    width: 24%;
    vertical-align: top;
    display: inline-block;
    *display: inline;}

.loc img{
    width: 100%;
    max-height: 432px;}


#lightbox {
    position:fixed;
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    background-color: rgba(0,0,0,0.5);
    text-align:center;
}

#lightbox img{
    max-height: 90%;
}

html

<body>
<div id="wrapper" align="center">
    <div id="locandine" class="locandine">
        <h1>Locandine</h1>
        <a href="pagine/immagini/loc1.png" class="loc">
            <img src="pagine/immagini/loc1.png" alt="loc1">
        </a>
        <a href="pagine/immagini/loc2.png" class="loc">
            <img src="pagine/immagini/loc2.png" alt="loc2">
        </a>
        <a href="pagine/immagini/loc3.png" class="loc">
            <img src="pagine/immagini/loc3.png" alt="loc3">
        </a>
    </div>
</div>

</body>
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>

JavaScript

jQuery(document).ready(function($) {

    $('.loc').click(function(e) {
        e.preventDefault();
        var image_href = $(this).attr("href");
        if ($('#lightbox').length > 0) { 
            $('#content').html('<img src="' + image_href + '" />');
            $('#lightbox').show();
        }

        else { 
            var lightbox = 
            '<div id="lightbox">' + //insert clicked link's href into img src
                '<img src="' + image_href +'" />' +
            '</div>';
            $('body').append(lightbox);
        }

    });

    //Click anywhere on the page to get rid of lightbox window
    $('#lightbox').live('click', function() { //must use live, as the lightbox element is inserted into the DOM
        $('#lightbox').hide();
    });

});

问题是，如果我使用 jquery 1.9.0 及更高版本(我使用的是 http://code.jquery.com/jquery-|versionHere|.js)，当我单击它时灯箱不会消失。那么我该如何解决这个问题，我是否必须更改部分代码或更改 jquery 库？

最佳答案

.live()从 v1.7 开始已弃用 .on() .检查浏览器控制台是否有错误消息始终是个好主意——我很确定这会引发错误 :)

因此，你应该使用:

$('document').on('click', '#lightbox', function() {
    // Function to close lightbox here
});

上面的代码有效地监听了从文档对象的 lightbox 元素冒泡的点击 :)

关于javascript - jquery 版本 1.9.0 及之后的灯箱不会消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29128236/

25 4 0
文章推荐： linux - 使用相同的配置和构建实现多个 jenkins
文章推荐： c++ - 获取链接错误 : Extern in C++. 如何访问在文件 A.CPP 中修改的变量的值在另一个文件文件 B.CPP 中
文章推荐： c++ - 在 AMD64 (Ubuntu 11.10) 上将 boost 编译为 i386
文章推荐： jQuery 在 Firefox 中定位不同的值
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com