function - jQuery 函数重复

Question

我正在制作自己的灯箱，关闭灯箱并再次打开后遇到问题。

这是简单的功能代码

(function($) {
    $.fn.lghtbx = function() {
        var lghtbxLink = $(this);
        lghtbxLink.click(function() {
            $('body').append("<div id=\"ZoomGallery\"></div>");
            $('#ZoomGallery').css({'width': '100%','height': '100%', 'position': 'absolute', 'left': '0px', 'top': '0px', 'backgroundColor':'#000'});

            $('#ZoomGallery').live('click',function() {
                $('#ZoomGallery').remove();
            })

            $(document).keydown(function(event) {
                switch (event.keyCode) {
                    case 37://left
                    alert('left!');
                    break;
                }
            })
        })
    }
})(jQuery);

我这样调用该函数

$(document).ready(function() {
    $('.lightbox').lghtbx();
});

这是简单的 html

<a class="lightbox" href="#">a</a>

当我单击链接并按键盘上的向左箭头时，会出现警报。这就是它应该如何工作的。但是，当我通过单击黑色 div 关闭灯箱并通过单击链接再次打开它时，问题就会出现。每次我单击向左箭头时，我都会收到两次警报。如果我关闭并再次打开灯箱并按向左箭头，我将收到三次警报......依此类推。

你能帮我解决这个问题吗？

Answer 1

首先删除旧事件

$(document).unbind("keydown").keydown(function(event) {