主页 / 问题 / 703370
Accepted
Black Fire
Asked:2020-08-08 18:34:41 +0000 UTC2020-08-08 18:34:41 +0000 UTC

灯箱关闭处理程序不起作用

  • 772

这是一个灯箱，在大图像旁边有一个按钮，单击时灯箱是隐藏的，但由于某种原因，该按钮的处理程序不起作用。

$(document).ready(function (){   
   $('.lightbox_trigger').click(function(e) {
        e.preventDefault();
        var image_href = $(this).attr("href");

        if ($('#lightbox').length > 0) {

            $('.wrap').html('<img src="' + image_href + '" />');

            $('#lightbox').show();
        }

        else { 
            var lightbox = 
            '<div id="lightbox">' +
                                    '<div class="wrap">' +
                    '<img src="' + image_href +'" />' +
                        '</div>'+ '<button id="close">Закрыть</button>' +
            '</div>';

            $('body').append(lightbox);
        }

    });

    $('#close').bind('click', function() {
        $('#lightbox').hide();
    });
        });
javascript

1 个回答

  1. Best Answer

    如果我理解正确，它似乎有效：

    $(document).ready(function (){   
   $('.lightbox_trigger').click(function(e) {
        e.preventDefault();
        var image_href = $(this).attr("href");

        if ($('#lightbox').length > 0) {

            $('.wrap').html('<img src="' + image_href + '" />');

            $('#lightbox').show();
        }

        else { 
            var lightbox = 
            '<div id="lightbox">' +
                                    '<div class="wrap">' +
                    '<img src="' + image_href +'" />' +
                        '</div>'+ '<button id="close">Закрыть</button>' +
            '</div>';

            $('body').append(lightbox);
        }

    });
    $(document).on('click','#close', function(){
        console.log(true);
        $('#lightbox').hide();
    });
});
    .lightbox_trigger{
    height: 100px;
    width: 100px;
    background-color: gray;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="lightbox_trigger">
    
</div>

    • 1

相关问题