jquery - 使列表项中的图像触发与较大列表项关联的功能？

Question

我在每个项目的左侧都有带有空复选框图像的列表项目。我将这些 li 样式设置为选择器（见下图）。

我可以将空复选框的图像附加到列表项，以便对图像的所有单击都会触发与单击较大列表项相关的任何功能？现在，单击选择器中除图像之外的任何位置都会触发单击功能，但我希望用户能够单击整个选择器。

<ul>
  <li id="opt1" class="list_header"> <img id="emptcheck1" src="images/emptycheckbox.png" /> option 1 </li>
  <li id="opt2" class="list_header">  <img id="emptcheck2" src="images/emptycheckbox.png" /> option 2 </li>
</ul>

Answer 1

您可以将整个内容包装在<a>标签内，或者将点击处理程序提供给<li>自身。

类型 1

JavaScript

$(".list_header").click(function(){
    ...
});

CSS

.list_header {cursor: pointer;}

类型 2

HTML

<ul>
  <li id="opt1" class="list_header"><a href="#"><img id="emptcheck1" src="images/emptycheckbox.png" /> option 1</a></li>
  <li id="opt2" class="list_header"><a href="#"><img id="emptcheck2" src="images/emptycheckbox.png" /> option 2</a></li>
</ul>

JavaScript

$(".list_header a").click(function(){
    ...
});

CSS

.list_header a {display: block;}