Abrir imagem em div depois de carregar com jquery

Tenho esse código jquery que faz um filtro, quando mostra o resultado, abre em uma div id=produtos, nessa div irá ter thumbnails e quero que clica na imagem e aparece em uma div ampliada do lado.

O filtro está funcionando, o que não funciona é o loader para carregar imagem do lado.

Poderiam me ajudar a resolver esse problema para funcionar o jquery para aparecer a imagem em uma div depois que aparece o resultado do filtro?

$(document).ready(function(){
 $('a.loader').on('click', function(e) {
 e.preventDefault();
 $('#content_simulador').load($(this).attr('href'));
});
$('#categoria').on('change',function(){
 var categoriaID = $(this).val();
 if(categoriaID){
 $.ajax({
 type:'POST',
 url:'admin/ajaxData_simulador2.php',
 data:'categoria_id='+categoriaID,
 success:function(html){
 $('#subcategoria').html(html);
 $('#produtos').html('<div class="container"><div class="col-md-12 filtro_simulador"><i class="fa fa-arrow-up" aria-hidden="true"></i> Selecione uma subcategoria</div></div>');
 }
 });
 }else{
 $('#subcategoria').html('<option value="">Selecione uma categoria</option>');
 $('#produtos').html('<div class="col-md-12">Selecione um produto</div>');
 }
 });

 $('#subcategoria').on('change',function(){
 var produtosID = $(this).val();
 if(produtosID){
 $.ajax({
 type:'POST',
 url:'admin/ajaxData_simulador2.php',
 data:'produtos_id='+produtosID,
 success:function(html){
 $('#produtos').html(html);
 }
 });
 }else{
 $('#produtos').html('<div class="col-md-12">Selecione um produto</div>');
 }
 });
});