Question

I have a strange problem.

I’m doing my own lightbox gallery in fullscreen. I’m having problems because when I click in the arrows ( #leftArrowFS, #rightArrowFS ) to move to the prev / next image I just can do it once. If a click a second time it doesn’t do anything

The HTML code:

    <a href=".path/to/BigImage.jps" class="lightbox">
    <img src="path/small/Image.jpg" />
    </a>    
....

and when the is clicked:

$('a.lightbox').click(function() {
        var imgSource= $(this).attr('href');
        lightboxFS(imgSource);
        return false;
    });

and my lightboxFS function that it’s in a .js file

function lightboxFS(imgSource){
...
do a a lot of stuff
...
    $('#rightArrowFS').click(function(){
        rightClick();
    });
}

function rightClick(){
        alert("right arrow");       
        ....
            ....
estadoSetas(array, imgSource);
}

The alert just appear once, even if I click hundreds of times. After I click #rightArrowFS if I click on #leftArrowFS, the alert doesn’t show too and vice versa.

Any ideas??Thanks

Answer 1

My first thought would be that the elements with the click events are being overwritten after an AJAX request, or something similar. If you replace the .click() with .live(‘click’, fn), does that resolve the issue?

As Felix said, though, a fiddle would be helpful.