jQuery在執行HTML（）時失敗（）

Question

我正在做一個圖片庫查看器，帶有一些縮略圖，一箇中等大小的查看器，並且如果您單擊該查看器，它將淡入顯示全尺寸圖像的div。

下面是截圖：

我的問題是，當我點擊一個小的縮略圖，然後我點擊中型照片，即mediumpic（以淡入（）的無形div），jQuery在執行html（）和fadeIn（）時失敗。但是，它僅在文檔準備就緒時（即默認情況下在查看器中加載的照片＃1）有效。但是當我點擊任何這些小縮略圖時，它就會毀掉它。那裏發生了什麼？

我的HTML如下：

echo "<div class='largepic_div'></div>"; 
echo "<div class='viewer'><img class='mediumpic'src='upload/photos/".$dbphoto1."'></div> 
echo "<div class='allpics'>"; 

echo "<div class='thumbnail_viewer'><img class='thumbnail_item' 
src='upload/photos/".$dbphoto1."' height='60'></div>"; 

echo "<div class='thumbnail_viewer'><img class='thumbnail_item' 
src='upload/photos/".$dbphoto2."' height='60'></div></div>"; 

我jQuery是以下幾點：

$(document).ready(function() { 

$('.thumbnail_item').click(function(){ 

    $('.viewer').html("<img class='mediumpic' src='upload/photos/"+ $(this).attr('src').split('/')\[2\] +"'>"); 

    }); 

$('.mediumpic').click(function(e){ 
    e.stopPropagation(); 
    $('.largepic_div').html("<img src='upload/photos/"+ $(this).attr('src').split('/')\[2\] +"'>").fadeIn(); 

    }); 

$('body').click(function(){ 
     $('.largepic_div').fadeOut(); 
     }); 
}); 

Answer 1

您指定的點擊處理程序mediumpic的文件準備好了，但是當你點擊縮略圖，你正在移除img元素並將其替換爲新的元素...因此處理程序不再連接。

您可以在單擊縮略圖後再次附加處理程序，也可以保留原始元素並僅替換img元素的src（而不是使用.html（））。

更新1：

方法1：

$('.thumbnail_item').click(function(){ 
    $('.viewer').html("<img class='mediumpic' src='upload/photos/"+ $(this).attr('src').split('/')\[2\] +"'>"); 
    $('.mediumpic').click(mediumpicHandler); 
}); 

$('.mediumpic').click(mediumpicHandler); 

var mediumpicHandler = function(e){ 
    e.stopPropagation(); 
    $('.largepic_div').html("<img src='upload/photos/"+ $(this).attr('src').split('/')\[2\] +"'>").fadeIn(); 
} 

方法2：

$('.thumbnail_item').click(function(){ 
    $('.viewer img').attr("src","upload/photos/"+ $(this).attr('src').split('/')\[2\]); 
}); 

警告：我沒有實際測試上面的代碼......它只是一個想法上在哪裏接受它。

更新2：

我只是展示瞭如何與縮略圖/中石化互動解決這個問題......你需要相同的修訂適用於中型/大型PIC的互動了。