jQuery не работает при выполнении html()

Question

Я делаю просмотрщик галереи изображений, с маленькими эскизами, одним средним просмотром, и если вы нажмете на этот просмотрщик, он станет fadeIn div, который отобразит изображение в полном размере.

Вот скриншот:

Моя проблема заключается в том, что, когда я нажимаю на маленькой иконке, то я нажимаю на средних фото, т.е. mediumpic (для того, чтобы FadeIn() для invisible 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 и заменяют его новым ... поэтому обработчик больше не прикреплен.

Вы можете либо присоединить обработчик снова после нажатия на миниатюру, либо сохранить исходный элемент и просто заменить src элемента img (вместо использования .html()).

UPDATE 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\]); 
}); 

Предупреждение: Я на самом деле не проверить код выше ... это просто мысль о где взять его.

UPDATE 2:

Я просто показал, как решить проблему с/взаимодействием среды рис эскизов ... вам нужно будет применить тот же фикс к/большому взаимодействию рис среды тоже.