Question

我正在为一个俱乐部使用Bootstrap，Node.js和jQuery创建一个网站。我正在尝试编写一段Javascript代码，当一个图像（或者最好是它所在的div）被点击时，另一个javascript函数我必须更改pdf显示才会运行。我的问题是无法点击图像。

我的图片代码：

<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捕获图像上的click事件？

Answer 1

使用JQuery Event Delegation在父元素上设置处理程序，但测试是否该事件源自图像并使用JQuery .click()方法而不是JQuery推荐的$("document").ready(function() { $("#2005d").on("click", "img" ,function(){ alert("Clicked"); }); });方法。

＆＃13;

<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>

＆＃13;

resize.cpp:4045: error: (-215) dsize.area() > 0

＆＃13;

Answer 2

您的代码是正确的，但您必须为图片编写点击事件，尝试此操作

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

使用jQuery .click函数单击监视图像上的单击

2 个答案: