Question

所以我尝试制作这个灯箱

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库？

Answer 1

自v1.7起，

.live()已被弃用，而.on()支持{{3}}。检查浏览器控制台是否有错误消息总是一个好主意 - 我很确定这会引发错误：）

因此，您应该使用：

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

上面的代码有效地监听了文档对象上灯箱元素的点击甚至冒泡：）

lightbox不会在jquery 1.9.0及更高版本中消失

1 个答案: