jQuery событие click на картинке только один раз

Question

Я создал вид миниатюр. Когда пользователь нажимает, я хочу, чтобы реальное изображение всплывало в диалоговом окне. Это работает в первый раз, но как только jQuery «щелкнет» на миниатюре, он больше не срабатывает, если я не перезагружу всю страницу. Я попытался перекрыть события кликов в закрытии диалогового окна, что не помогает. Вот мой код:

$(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() выполняет только первый раз, когда изображение щелкнуло, и я не могу понять, как пересвязать.

Answer 1

ОК, во-первых, рефакторинг 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(); 
    } 

Во-вторых, $(function(){ ... работает так же, как $(document).ready(){ function(){..., имейте это в виду.

$(document).ready() только пожары один раз - сразу после загрузки страницы. Поэтому, если вы звоните LoadProgramsAccordion несколько раз, внутренний материал выполняется только один раз.

Дальше остерегайтесь $(this), это может неожиданно измениться. Так что этот код

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

должен быть изменен, чтобы выглядеть следующим образом:

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

Далее, я должен был бы увидеть PopUpImage. У вас просто много предстоит выяснить, где проблема.

Answer 2

Крис, спасибо за головы за $ (это), я изменил свое программирование из-за этого. В остальном я перешел на Лайтбокс по вашему предложению.