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) {

Answer 2

那是因为你多次绑定事件。关闭灯箱时应取消绑定事件：

        $('#ZoomGallery').live('click',function() {
            $('#ZoomGallery').remove();
            $(document).unbind("keydown");
        })

在这里摆弄：http://jsfiddle.net/ASS4D/

jQuery函数重复

2 个答案: