Пожар Javascript функция на изображения нажмите внутри HTML DIV

Question

У меня есть DIV, который содержит изображение:

<div class="HD"> 
    <img class="image1"src="img/myimage.png"> 
</div> 

СМЧ применяется к нему:

.HD img { 
    position:absolute; 
    top:570px; 
    left:1120px; 
    width:30px; 
    height:90px; 
    cursor:pointer 
} 

Я хочу, чтобы применить функцию щелчка к изображению внутри div. Однако, когда я даю идентификатор изображения или класс и использую его для создания функции, javascript не срабатывает. Когда у div нет изображения, и я использую класс, javascript работает так, как ожидалось. Ниже функция JavaScript:

$(".HD").click(function() { 
    if($('.UpperDiv').attr('data-visible') == "hidden") { 
     $('.UpperDiv').attr('data-visible', 'visible'); 
     $('.UpperDiv').animate({ 
      opacity:1 
      // top:'250px' 
     }); 
    } else { 
     $('.UpperDiv').attr('data-visible','hidden'); 
     $('.UpperDiv').animate({ 
      opacity:0 
      // top:'250px' 
     }); 
    } 
}); 

Что может быть причиной? Что не так с моим кодом?
Как я могу запустить javascript, когда пользователь нажимает на div, содержащий изображение?

Для справки, это сайт Я trying to make и original working version.

Answer 1

Try:

$(".HD").on({ 
    click : function(){ 
     if($('.UpperDiv').attr('data-visible')=="hidden") 
     { 
       $('.UpperDiv').attr('data-visible','visible'); 
       $('.UpperDiv').animate({ 
         opacity:1 
         // top:'250px' 
       }); 
     }else{ 
       $('.UpperDiv').attr('data-visible','hidden'); 
       $('.UpperDiv').animate({ 
         opacity:0 
         // top:'250px' 
       }); 
     } 
    } 
}, 'img'); 

Answer 2

Разве вы не можете просто использовать .toggle?

$(".HD").toggle(400); 

или .fadeToggle?

$(".HD").fadeToggle(); 

Answer 3

$(".HD > img").click(function() { }); 

Используйте это и попробовать.