Railsで.js.erbファイルでのクリックイベントを1回目から発火させたい（2回目以降のクリックしか発火されない）

Question

前提・実現したいこと

update.js.erbファイルでクリックイベントを用いてクラスの入れ替えをしたい。

発生している問題・エラーメッセージ

update.js.erbのクリックイベントが1回目のクリックでは発火されず、2回目以降でしか発火されない。

該当のソースコード

【index.slim.rb】

td
 #target-text.badge class="#{@user.has_filed ? 'success' : 'default'}"

= link_to user_path, remote: true, method: :patch do
 .btn#target-btn
  | 変更

【users_controller.rb】

  def update
    @user.update_attributes(has_filed: !@user.has_filed)
  end

【update.js.erb】

$('#target-btn').click(function() {
  console.log("クリック発火")

  if ($('#target-text').hasClass('default')) {
    $('#target-text').removeClass('default')
    $('#target-text').addClass('success')
    $('#target-text').html('有効')
  } else {
    $('#target-text').removeClass('success')
    $('#target-text').addClass('default')
    $('#target-text').html('無効')
  }
})

コンソールで確認してみましたが、2回目以降のクリックでしか、『クリック発火』は表示されていませんでした。

試したこと

https://teratail.com/questions/236407

↑の過去記事を参考に、

【update.js.erb】

$('#target-btn').on('ajax:success', function() {
  console.log("クリック発火")
}

としてみましたが結果は変わりませんでした。
update.js.erbでは他のコードでdefault、successクラスを使用する記載があるので、影響しないように、クリックイベントで括りたいです。

他にも、少し闇雲ではありますが

【update.js.erb】

$('#target-btn').on('click', function() {
  console.log("クリック発火")
}

や

【update.js.erb】

$('#target-btn').one('click', function() {
  console.log("クリック発火")
}

等記載を変更してみましたが、結果は変わりませんでした。

そもそもjs.erbファイル内でクリックイベントを待ち受けているのが良くない等ありましたら、ご指摘いただければと存じます。
大変恐縮ではございますが、対処法をご教示いただけましたら幸いでございます。。