Question

我有一个带div的图像的简单代码

当我点击div而不是图像时（例如填充），它可以工作，但是当我点击图像时，它不起作用。

$(".parent0").click(function() {
  console.log("hello");
});

div { padding: 15px; border: 1px solid black; width: 655px;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="parent0">
  <img src="http://lorempixel.com/output/sports-q-c-640-480-6.jpg"></img>
</div>

Answer 1

为什么不让它这样点击图像做某事，而不是div？由于div本身只是包含所显示图像的代码。

为图像添加一个id并监听它是否被点击或添加onclick（认为这也适用于图像？）到调用函数的图像。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="parent0">
  <img id="imageClick" src="http://lorempixel.com/output/sports-q-c-640-480-6.jpg"></img>
</div>


$("#iimageClick").click(function() {
  console.log("hello");
});

或

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="parent0">
  <img onclick=DoFunction() src="http://lorempixel.com/output/sports-q-c-640-480-6.jpg"></img>
</div>

function DoFunction(){
do something
};

Answer 2

发现问题：我有另一个div后位置相对和宽度：100％，它覆盖我的图像，所以我把z-index：2放到我的div parent0。

罚款：）

谢谢大家。

Answer 3

你在图片标签中犯了错误。你的标签就像

<img src="http://lorempixel.com/output/sports-q-c-640-480-6.jpg" />

在父div上的Jquery onclick对img child不起作用

3 个答案: