Javascript jQuery在执行html（）时失败

我正在做一个图像库查看器，带有小缩略图，一个中等大小的查看器，如果你点击该查看器，它会变成一个以全尺寸显示图像的div

以下是一个屏幕截图：

我的问题是，当我单击一个小缩略图，然后单击中等大小的照片，即mediumpic，以便对不可见的div进行fadeIn时，jQuery无法执行html和fadeIn。但是，它仅在文档准备就绪时才起作用，也就是说，默认情况下，在查看器中加载photo1。但当我点击任何一个小缩略图时，它就会毁掉它。那里发生了什么

我的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>";

$(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();
        }); 
});

我的jQuery如下所示：

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>";

$(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();
        }); 
});

---

您正在将click处理程序分配给document ready上的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：

---

我刚刚演示了如何解决缩略图/中等图片交互的问题。。。您还需要对中型/大型pic交互应用相同的修复。

刚刚更正了php变量的$符号。感谢您的回复。至于第二个选项，您的意思是：进入largepic_div的子级并将其src属性更改为另一个路径吗？非常感谢regardsI实际使用了您的方法2，而且效果非常好。非常感谢！我有一个问题，当我用另一个替换img时，为什么处理程序不再连接？我已将单击事件分配给一个类。我原以为它一直在工作，但事实并非如此。是因为这是在document.ready上执行的吗？多亏了lotYes，在文档就绪时，jQuery会找到所有带有mediumpic类的元素，并将处理程序附加到它们。之后，它将不再执行。简而言之，处理程序附加到元素，而不是类。非常感谢您的解释，我终于得到了它。当做