Question

I’m making my own lightbox and I have problem after closing the lightbox and turning it on again.

Here is the simple function code

(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);

I’m calling that function like this

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

And this is the simple html

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

When I click on the link and press left arrow on the keyboard alert appears. That’s how it’s supposed to work. But when I close the lightbox by clicking on the black div and when I open it again by clicking on the link then the problem pops out. Every time I click the left arrow I’m getting alert two times. If I close and open lightbox again and press the left arrow I will get alert three times… and so on.

Can you help me to solve this problem?

Answer 1

first remove the old event

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