在列表项中创建图像与较大列表项关联的fire函数？

Question

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

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

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