Анимация div на динамическом изображении нажмите

Question

Вот что я пытаюсь достичь: на странице загрузите кучу изображений из БД и прикрепите их к галерее div при нажатии на изображение галереи: выцветать текущее большое главное изображение - > заменить источник утрачены изображений на источник щелкнули уменьшенное изображение -> анимировать Div контейнер основного изображения на новую высоту изображения -> выгорает основное изображение обратно в

у меня есть этот код:.

$.getJSON('inc/API.php', 
{ 
    command: "get_ads_to_display" 
}, 
function(result){ 
    $("#img_main").attr('src', 'images/'+result[0].ad_image_filename); 
    for(var i = 0; i<result.length; i++) 
    { 
     $("<div class='div_item_container'>"+ 
      "<div class='div_ad_name'>"+result[i].ad_publisher+"</div>"+ 
      "<div class='div_ad_image'><img src='images/"+result[i].ad_image_filename+"' /></div>"+ 
     "</div>").appendTo("#gallery"); 
    } 

    // Channge main image src to src of a clicked image 
    //animate the main image div's height 
    $('.div_item_container').on('click', '.div_ad_image img', function() { 
     var src = $(this).attr('src'); 
     $("#img_main").fadeTo(200,0,function(){ 
      $("#img_main").attr('src', src); 
      var img = document.getElementById('img_main'); 
      var img_height = img.clientHeight; 
      //alert(img_height); 
      $("#div_main_image_container").animate({height:img_height+10+'px'},250,function(){ 
       $("#img_main").fadeTo(200,1); 
      }); 

     }); 
    }); 
}); 

Это работает, за исключением первого щелчка - при первом нажатии на любое из изображений галереи у меня нет анимации div, она просто изменяет размер div, заменяет t он изображает src и исчезает снова. После этого у меня хорошая анимация высоты div. Почему это происходит, и есть ли способ исправить это?

Answer 1

решаемых проблема: у div галереи не было заданного начального значения высоты. Как только я определил его в CSS (даже height:0; работал) - все отлично работало.

Answer 2

Вам необходимо делегировать событие в каком-то элемент, который не создается динамически - (? вы добавление этого в правом петле)

$('#gallery').on('click', '.div_ad_image img', function() {

#gallery вместо .div_item_container