More than 5 years have passed since last update.

子要素にcheckboxを持つ要素に実装したjQueryのclickイベントが2回発生する

Last updated at 2020-04-02Posted at 2020-04-02

以下のようなcheckboxとそれに紐付くlabelを子要素としてもつ要素にjQueryでclickイベントを実装すると
label上をクリックした際にイベントが2回重複して発生します。

html

<div id="box">
  <input type="checkbox" id="chekbox">
  <label for="checkbox">checkbox</label>
</div>

let count = 1;
$("#box").on("click", function(){
  console.log(count+ " clicked");
  count ++;
});

console（クリック後）

> 1 clicked
> 2 clicked

これはそもそもlabelがクリックされた時にlabelに紐付くinputもクリックされたとみなされるために起こるそうなので、
クリック対象をinputに向けることで解決する。

$("#box input").on("click", function(){
   // クリック後にしたい処理
});