jquery函數只能工作一次

Question

我有一個畫廊類型的頁面縮略圖。當你點擊一個拇指時，它會將與該拇指相關的圖像加載到一個隱藏的div中，當它們完成加載然後div滑動打開。如果您單擊另一個拇指，則會關閉div，清除內容，加載新內​​容，然後再次打開它。當您加載頁面時，您可以單擊一個拇指，然後單擊另一個，但如果您返回到第一個拇指並單擊該div不會再次打開，不知道爲什麼。感謝您的幫助。

我對它有jsbin在這裏設立http://jsbin.com/epawub/12/edit

我已成立了拇指的JavaScript如下：

var imgCount = 0; 
var image=$('#images'); 

$('#klossviolins').click(function() { 
    console.log("Loading..."); 
    $('#images').slideUp(500, function() { 
    $("#images").empty().ready(function(){ 
     $("<img>", { 
      src: "http://www.klossal.com/images/klossviolins/home.jpg" 
     }).appendTo("#images").load(onImage); 
     $("<img>", { 
      src: "http://www.klossal.com/images/klossviolins/services.jpg" 
     }).appendTo("#images").load(onImage); 
    });  
    }); 
    $("#info_header").empty(); 
    $('#info_header').append("Kloss Violins Website"); 
}); 


$('#light_dance').click(function() { 
    console.log("Loading..."); 
    $('#images').slideUp(500, function() { 
    $("#images").empty().ready(function(){ 
     $("<img>", { 
      src: "http://www.klossal.com/light_dance_1.jpg" 
     }).appendTo("#images").load(onImage); 
     $("<img>", { 
      src: "http://www.klossal.com/light_dance_var.png" 
     }).appendTo("#images").load(onImage); 
     $("<img>", { 
      src: "http://www.klossal.com/light_dance_2.jpg" 
     }).appendTo("#images").load(onImage); 
    });  
    }); 
    $("#info_header").empty(); 
    $('#info_header').append("Dancing With Light Series"); 
}); 




function onImage(e) 
{ 
    console.log("Image loaded"); 
    imgCount++; 

    if (imgCount == image.children().length) 
    { 
     image.slideDown(500); 
    } 
} 

Answer 1

您設置圖像的之前，必須綁定到加載事件src值，否則如果圖像被緩存，則在綁定到它之前將觸發加載事件。

$("<img>").load(onImage).attr("src","http://www.klossal.com/light_dance_1.jpg").appendTo("#images"); 
// repeat for all similar 

此外，請確保您復位imgCount回到0

... 
if (imgCount == image.children().length) 
{ 
    image.slideDown(500); 
    imgCount = 0; 
    ...