圖像上的jQuery單擊事件只會觸發一次

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

克里斯，感謝$（this）的領導，因爲它而改變了我的節目。其餘的，我已根據您的建議切換到Lightbox。