jQuery Lightbox库只工作一次

我正在尝试构建自己的简单jQuery灯箱库 . 我背后的逻辑如下：首先只显示和创建缩略图 . 这些链接到完整大小的图像 .

<section class="gallery-set">
                <a href="img/about/gallery/a1.1.jpg">
                    <img src="img/about/gallery/thumb1.1.jpg" alt=""
                    height="192" width="383">
                </a>
                <a href="img/about/gallery/a1.jpg">
                    <img src="img/about/gallery/thumb1.jpg" alt=""
                    height="192" width="383">
                </a>
                <a href="img/about/gallery/a2.1.jpg">
                    <img src="img/about/gallery/thumb2.1.jpg" alt=""
                    height="192" width="383">
                </a>
            </section>

因此，当您单击任何这些缩略图时，我会动态创建叠加灯箱和所有全尺寸图像，仅显示链接到您单击的缩略图的图像 . 虽然其他图像也已创建，但现在隐藏了这些图像 .

function lightBox() {

    var gallery = $('.gallery-set'),
        overlay = $('<div/>', {id: 'overlay'});

    overlay.appendTo('body').hide();

    gallery.on('click', 'a', function(event) {
        event.preventDefault();
        var clickedThumb = $(this),
            clickedThumbPath  = $(this).attr('href'),
            clickedImg = $('<img>', {src: clickedThumbPath, alt: 'fullSizeImage', class: 'current'}),
        prevThumbs = clickedThumb.prevAll(),
        nextThumbs = clickedThumb.nextAll();

        prevThumbs.each(function() {
            var prevImg = $('<img>', {src: $(this).attr('href'), class: 'prev non-current'});
            prevImg.appendTo(overlay);
        });
        clickedImg.appendTo(overlay);
        nextThumbs.each(function() {
            var nextImg = $('<img>', {src: $(this).attr('href'), class: 'next non-current'});
            nextImg.appendTo(overlay);
        });

    overlay.show();
    })
.....
.....
}

现在，当您单击第二个缩略图时，jQuery会动态创建所有全尺寸图像，这就是HTML结构的样子：

现在我有了这个结构，我可以通过左右箭头轻松遍历全尺寸图像 . 当前图像被隐藏，下一个图像被显示出来 . 对于这个逻辑，我使用两个类， current 和 non-current ，其中第一个类将display设置为block而第二个设置为none . 这段代码在lightbox（）函数中：

$(document).on('keyup', function(event) {

        var pressed = event.keyCode || event.which,
            arrow = {left: 37, right: 39};

        switch(pressed) {
            case arrow.left:
                var curr = overlay.find('.current'),
                    prev = curr.prev();
                if(curr.hasClass('current')) {
                    curr.removeClass('current').addClass('non-current');
                } else {
                    curr.addClass('non-current');
                }
                if(prev.hasClass('non-current')) {
                    prev.removeClass('non-current').addClass('current');
                } else {
                    prev.addClass('current');
                }
                break;
            case arrow.right:
                var curr = overlay.find('.current'),
                    next = curr.next();
                curr.removeClass('current').addClass('non-current');
                next.removeClass('non-current').addClass('current');
                break;
        }
    });

    overlay.on('click', function() {
        overlay.hide();
        overlay.find('img').remove();
    });

});

第一次一切正常 . 但是，一旦我关闭灯箱并尝试再次打开它，将打开正确的图像，但箭头功能已消失 . 我不明白为什么 - 因为每次用户点击图库并动态创建事件监听器（箭头）时，我就会动态创建完整大小的图像 .

只是为了记录，我在结束标记之前从HTML文件中调用此lightbox（）函数 .

任何想法都非常感激 . 此外，如果有更简单/更好的方法，请告诉我！我不想使用任何插件，因为我认为这非常简单明了 . 或者，我认为这应该是我应该说的简单 .