The jQuery click event on the image fires only once

Question

I created a thumbnail view. When the user clicks, I want the real image to pop up in the dialog box. This works for the first time, but after running jQuery 'click' on a thumbnail, it never works unless I reload the entire page. I tried to override click events in closing the dialog, which 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 () is only executed when the image is first clicked, and I cannot figure out how to restore it.

Answer 1

OK, first time, refactoring 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 for $ (this), I changed my programming because of this. For the rest, I switched to Lightbox at your suggestion.