在html div中单击图像时启动javascript函数

我有一个包含图像的div：

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

我想对div中的图像应用一个click函数。但是，当我给出一个图像id或类并使用它来创建函数时，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'
        });
    }
});

原因可能是什么？我的代码有什么问题？
当用户单击包含图像的div时，如何启动javascript

作为参考，这是我的网站，请尝试：

$(".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');

尝试：

你就不能用它吗

还是

你就不能用它吗

还是

用这个试试

---

用这个试试。

你能提供一个JSFIDLE吗？我还没有用过JSFIDLE。。我正在努力创造一个。。如果我这样做了，那会有用吗？是的，肯定会有助于回答你的问题。你能提供一个JSFIDLE吗？我没有使用JSFIDLE。。我正在努力创造一个。。如果我做了，那会有用吗？是的，肯定会有助于回答你的问题。有没有一种方法我们可以应用一个图像类或图像id，然后点击它激发javascript。。感谢您的回答，尽管它确实提供了有用的建议您使用的是哪个版本的jQuery？是否有一种方法可以应用一个图像类或图像id，然后单击该方法激发javascript。。感谢您的回答，尽管它确实提供了有用的建议您使用的是哪个版本的jQuery？很抱歉，我无法理解您的答案..您为什么建议切换。。切换将在两个div之间切换。。但是现在的问题是，点击一下什么都不会发生对不起，我听不懂你的答案你为什么建议切换。。切换将在两个div之间切换。。但目前的问题是，点击一下什么也不会发生。。

$(".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');

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

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

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