第一次我的函数运行正常，第二次它的错误jQuery

Question

I'm trying to make a lightbox. But when i open the lightbox for the second time. It goes trough my code twice. When i open my lightbox the third time, it goes trough my code three times. Don't get it at all.

$(document).ready(function(){
$('.bg-overlay, .overlay-content, .overlay-content img').hide();

$('.thump-bnr > li').click(function(){

    // show the overlay and bg-overlay
    $('.bg-overlay, .overlay-content').fadeIn(500);

    // gets the index of the thunp thats been clicked in the banner
    var x = $(this).index();
    // console.log(x);

    $('.overlay-content > img').eq(x).fadeIn(500);

    // thumpPop checks if there aren't to mutch list items
    var thumpPop = $('.overlay-content .thump-pop li').length;
    // console.log(thumpPop);

    // appends all li for the thump navigation in the overlay
    if (thumpPop < 1) {
        $('.overlay-content').append('<ul class="thump-pop"></ul>');
        for (var i = 0; i < 4; i++) {
            $('.thump-pop').append('<li></li>');
        }
    }

    // sets all thump li to the border white
    $('.thump-pop > li').css("border-color", "#fff");

    // sets the active thump li to a dark border
    $('.thump-pop > li').eq(x).css("border-color", "#e2e2e2");

    // console.log(x);


    // calls the thumpNav function for the thump navigation     
    thumpNav();

    // calles the arrowNav function for the arrow navigation beside the big images
    arrowNav();

});

In this function i have managed to execute the function only once by using an if statement.

// this is the function for the thump navigation
function thumpNav() {

$('.thump-pop > li').click(function(){

    // get the index number of the thump li 
    var y = $(this).index();
    // console.log(y);

    // checks if the big image thats equal to the clicked thump is hidden
    if($('.overlay-content > img').eq(y).is(':hidden')) {

        // fadeIn and fadeOut the big images
        $('.overlay-content img').fadeOut();
        $('.overlay-content > img').eq(y).fadeIn();

        // this wil change the border color of the active li
        $('.thump-pop > li').css("border-color", "#fff");
        $(this).css("border-color", "#e2e2e2");
    }           
});
}

I think i have made a mistake in the function arrowNav(), because he executes this twice when i open my lightbox for the second time.

function arrowNav() {
$('.arrow-nav-left').click(function(){

    // this wil get the index number of the visible image in the overlay. This number can be used to display the number -1 our +1
    var x = $('.overlay-content').find('img:visible').index();
    // console.log(x); 

    var x = x - 2;
    console.log(x);

        $('.overlay-content > img').hide();
        $('.overlay-content > img').eq(x).show();

});
}



// hides the pop-up
$('.bg-overlay').click(function(){
    $('.bg-overlay, .overlay-content, .overlay-content img').fadeOut(500);
}); 
});

Please help me, and some feedback on the code is alway helpfull. Thanks

Answer 1

The problem is here:

function thumpNav() {

    $('.thump-pop > li').click(function(){

You're attaching a new click handler everytime you call thumpNav , and they will all execute and do the same thing everytime you click.

Replace with:

function thumpNav() {
    $('.thump-pop > li').unbind("click").click(function(){

Just like you did with arrowNav() .

Note that your code is very unefficient and not structured quite right. Even if this works it's not good when you're juggling click handlers like this. At least define the callback as a seperate function and pass that as an argument to click() .

If you want to get help with improving your code, you can always post it on Codereview .

Answer 2

Every time you're calling:

thumpNav();

you're attaching a new click handler.

same with arrowNav()

but atleast here you unbind first.