jQuery click event on image only fires once

Question

I created a view of thumbnails. When the user clicks, I want the real image to pop-up in a dialog. That works the first time, but once the jQuery 'click' fires on an thumbnail it never fires again unless I reload the entire page. I've tried rebinding the click events on the dialog close that that does not help. Here is my code:

$(document).ready(function() 
    {
        $("#tabs").tabs();
        $(".selector").tabs( {selected: 0} );
        $("img.gallery").live('click',
                function()
                {
                    var src= $(this).attr('src');
                    var popurl = src.replace("thumbs/", "");
                    PopUpImage(popurl,$(this));
                });
        // Preload animation for browser cache
        var ajaximg = new Image();
        ajaximg.src = 'images/ajax-loader.gif';
    });

    function LoadProgramsAccordion()
    {
        $(function() {
            $("#programsaccordion").accordion({
                            autoHeight: false,
                navigation: true,
                            collapsible: true
            });
        });

        $(function() {
            $("#programsaccordioninner").accordion({
                            autoHeight: false,
                navigation: true,
                            collapsible: true
            });
        });

        $(function() {
            $("#policiesaccordioninner").accordion({
                            autoHeight: false,
                navigation: true,
                            collapsible: true
            });
        });

        $(function() {
            $("#registrationaccordioninner").accordion({
                            autoHeight: false,
                navigation: true,
                            collapsible: true
            });
        });

        $('.accordion .head').click(function() {
                        $(this).next().toggle();
                        return false;
                }).next().hide();
    }

    function LoadGalleryView()
    {
        $('img.gallery').each(function(){
            $(this).hover(function(){
                $(this).attr('style', 'height: 100%; width: 100%;');
            }, function(){
                $(this).removeAttr('style');
            });
        });
    }

    function CheckImage(img,html,source)
    {
        if ( img.complete )
        {
            $('#galleryProgress').html('');
            var imgwidth = img.width+35;
            var imgheight = img.height+65;
            $('<div id="viewImage" title="View"></div>').html(html).dialog(
                    {
                        bgiframe: true,
                        autoOpen: true,
                        modal: true,
                        width: imgwidth,
                        height: imgheight,
                        position: 'center',
                        closeOnEscape: true
                    });
        }
        else
        {
            $('#galleryProgress').html('<img src="images/ajax-loader.gif" /><br /><br />');
            setTimeout(function(){CheckImage(img,html);},50);
        }
    }

    function PopUpImage(url,source)
    {
        var html = '<img src="'+url+'" />';
        var img = new Image();
        img.src = url;
        if ( ! img.complete )
        {
            setTimeout(function(){CheckImage(img,html,source);},10);
        }
    }

PopUpImage() only executes the first time an image is clicked and I cannot figure out how to rebind.

Answer 1

OK, first off, refactor LoadProgramsAccordion.

function LoadProgramsAccordion() { $(function() { $("#programsaccordion, #programsaccordioninner, #policiesaccordioninner, #registrationaccordioninner").accordion({ autoHeight: false, navigation: true, collapsible: true }); });

     $('.accordion .head').click(function() {
                    $(this).next().toggle();
                    return false;
            }).next().hide();
}

Second, $(function(){ ... works the same as $(document).ready(){ function(){..., keep that in mind.

$(document).ready() only fires one time - right after the page loads. So if you are calling LoadProgramsAccordion multiple times, the inner stuff is only being executed one time.

Next, beware of $(this), it can change unexpectedly. So this code

           function()
            {
                var src= $(this).attr('src');
                var popurl = src.replace("thumbs/", "");
                PopUpImage(popurl,$(this));
            });

should be changed to look like this:

           function()
            {
                var that = $(this);
                var src= that.attr('src');
                var popurl = src.replace("thumbs/", "");
                PopUpImage(popurl,that);
            });

Next, I would need to see PopUpImage. You just have a lot going on to figure out where the issue is.

Answer 2

Chris, thanks for the heads up on $(this), I've changed my programming because of it. For the rest, I've switched to Lightbox per your suggestion.