jqueryで同じクラス名が2つあった場合に処理が2回走るのはなぜですか？

Question

質問

$(this).hasClass　でクリックしたほうを指定していると思っています。
なぜ2回読み込むのでしょうか？
またどうすれば希望の動作をするのでしょうか？

希望の動作

同じクラス名を持つ<label>要素をクリックした際に
クリックした方にclass="active"をつけ、もういちどクリックしたら外すスクリプトを書きたい

エラー内容

コンソールを見てみるとクリックした際に2回処理が走りtrue と false を交互に読み込んでいる

<div class="clm-wrap clm-sub-content">
　<label class="field-clmimg">
　　<input type="checkbox" class="form-checkbox-input">
　</label>
　<label class="field-clmimg">
　　<input type="checkbox" class="form-checkbox-input">
　</label>
</div>

  var fieldClmimg = $(".field-clmimg");

$(".field-clmimg").click(function () {
  console.log($(this).hasClass('active'))
  if ($(this).hasClass('active')) {
    $(this).removeClass("active");
  } else {
    $(this).addClass('active')
  }
})

Answer 1

ラベルからではなくチェックボックスを起点にすればよいのでは？

$(function(){
  $(".form-checkbox-input").on('change',function (e) {
    $(this).closest('.field-clmimg').toggleClass('active');
  });
});

Comments

[Overrun]

起点を変えるという方法も考えてみます！ありがとうございます。

Answer 2

原因はLhankor_Mhyさんの回答のとおりだと思います。
対処法としては下記のような感じでしょうか。

$(".field-clmimg").click(function () {
  $(this).toggleClass('active');
})
$(".form-checkbox-input").click(function (event) {
  event.stopPropagation();
})

下記の方かシンプルかな。

$(".form-checkbox-input").click(function () {
  $(this).parent().toggleClass('active')
})

Comments

[Overrun]

丁寧な回答ありがとうございます。参考にさせていただきます！

Answer 3

label要素がクリックされると、紐づけられているフォーム部品もクリックされたことになり、クリックイベントはバブリングするので、2回イベントリスナが走っているのだと思います。

【jQuery】ラベルで囲まれたチェックボックスでclickイベントが2回実行される - Qiita

イベントのバブリングとキャプチャリング | イベントへの入門 - ウェブ開発を学ぶ | MDN

---

stopPropagation()を使うと解決するかもしれません。

Event.stopPropagation() - Web API | MDN

Comments

[Overrun]

ありがとうございます。長年の疑問が解けました！

[Lhankor_Mhy]

お役に立てたようで何よりです。