javascript - 使用 jQuery .click 函数点击观看图像上的点击

Question

我正在为一个俱乐部使用 Bootstrap、Node.js 和 jQuery 制作一个网站。我正在尝试编写一段 Javascript 代码，当单击图像(或者最好是它所在的 div)时，我必须更改 pdf 显示的另一个 javascript 函数将运行。我的问题是无法捕捉到对图像的点击。

我的图片代码:

<div id="2005d" style="cursor: pointer">
    <img id="2005p" style="max-width: 100%" src="/magazines/2005_cover.jpg">
    <h5 id="2005t" style="text-align: center; color: black">2005</h5>
</div>

我正在尝试使用 jQuery 来捕获对此图像的点击:

$("document").ready(function() {
    $("#2005d").click(function(){
        alert("Clicked");
    });
});

我该怎么做才能让 jQuery 捕捉图像上的点击事件？

Answer 1

使用 JQuery 事件委托(delegate)在父元素上设置处理程序，但要测试事件是否源自图像并使用 JQuery .on() 方法而不是 。 click()，这是 JQuery 推荐的。

$("document").ready(function() {
    $("#2005d").on("click", "img" ,function(){
        alert("Clicked");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="2005d" style="cursor: pointer">
    <img id="2005p" style="max-width: 100%" src="https://image.spreadshirtmedia.com/image-server/v1/mp/designs/12386804,width=178,height=178/winking-smiley-face.png">
    <h5 id="2005t" style="text-align: center; color: black">2005</h5>
</div>