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