La fonction jquery ne fonctionne qu'une seule fois à travers

Question

J'ai une page de type galerie avec des vignettes. Lorsque vous cliquez sur un pouce, il charge les images relatives à ce pouce dans un div masqué, quand elles sont chargées, puis div puis les diapositives s'ouvrent. Si vous cliquez sur un autre pouce, il ferme la div, efface le contenu, charge le nouveau contenu, puis l'ouvre à nouveau. Lorsque vous chargez la page, vous pouvez cliquer sur un pouce, puis sur un autre, mais si vous revenez au premier pouce et cliquez sur le div ne s'ouvrira pas à nouveau, je ne sais pas pourquoi. Merci pour toute aide à ce sujet.

J'ai un jsbin de celui-ci a mis en place ici http://jsbin.com/epawub/12/edit

le javascript j'ai mis en place pour les pouces est la suivante:

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

Vous devez lier à l'événement de chargement avant de définir l'image de valeur src, sinon l'événement de chargement se déclenchera avant de vous lier si l'image est mise en cache.

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

Aussi, assurez-vous de réinitialiser imgCount retour à 0.

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