jQueryで条件を満たしてないように見えるのに発火してしまう。

Question

実現したいこと

一度目のクリックでクラスを消して、二度目に発火しないようにしたいです。

前提

自分の環境だと一度目のクリックでクラスを消しているのに二度目のクリックでも発火してしまいます。
（DOM上でクラスが消えていることは確認済みです）
DOM上でクラスが消えているのに発火してしまう理由としてはどういう理由が考えられますか？
解る方ご回答お願い致します。

※alertは確認の為に入れました

該当のソースコード

<script>
  jQuery(".archive .share_button_container.fab_not_checked").click(function() {
    jQuery(this).find('input[name="fab_checkbox"]').attr('checked', true).prop("checked", true).change();
    jQuery(this).removeClass("fab_not_checked");
    alert("aaa");
  });
</script>

Answer 1

自分の環境だと一度目のクリックでクラスを消しているのに二度目のクリックでも発火してしまいます。

jQuery(セレクタ).click()と書いた場合、イベントのセット時点でセレクタの条件を満たしていたものにイベントが設定されます。

当該のエレメントについて、あとからクラスを入れ替えても何も影響しません。

Answer 2

発火してしまう原因はmaisumakunさんの指摘通りです。
対策としては、下記の２つが考えられます。

• hasClass()で該当クラスがあるかどうかチェックして、あるときのみ実行する。
• off()でクリックイベントを削除する。