jQueryのクリックイベントが２回目以降、発火しない

Question

前提・実現したいこと

jQueryを用いて、タブのクリックによって表示するHTMLを切り替えることで動作する、表示切り替えタブの実装を行いたい。

前提(ソースコード参照)

toggleClassメソッドを用いてselected unselectedのクラスを入れ替えることで、今、どちらのタブがアクティブになっているかを識別できるようにし、
toggle()メソッドを用いて表示する中身のHTMLを切り替える方針にした。
その際、デフォルトHTMLでは一方にselectedクラスを、もう一方にunselectedクラスをあらかじめ付与しておいた。

jQueryでは、$('.unselected').on('click', function() {・・・}のようにクリックイベントを設置した。

問題

１回目のクリックイベントは正常に切り替えが動作したが、２回目以降のクリックイベントが１回目の要素上で発火してしまう。
おそらく、今のコードの書き方では、ページ読み込み時にunselectedクラスを持っている要素しかクリックイベントを持たない？
という理解でこのような問題が起きていると思っているのですが、この理解で正しいのでしょうか。
また、これを解決するためにはどうすればよいでしょうか。

該当のソースコード

<div class="tab_container">
  <div class="change_tab left selected">
    <p>left</p>
  </div>
  <div class="change_tab right unselected">
    <p>right</p>
  </div>
</div>
<div id="left_content">
  <p>left_content</p>
</div>
<div id="right_content">
  <p>right_content</p>
</div>

.tab_container {
  margin: 0 auto;
  display: flex;

  .change_tab {
    flex-grow: 1;
    flex-basis: 0;
    border-bottom: 2px solid #d8dadf;
    padding: 2px;
    font-size: 20px;
  }

  .selected {
    font-weight: bold;
    color: black;
    border-bottom: 2px solid #3385D9;
  }

  .unselected {
    cursor: pointer;
  }
}

$(document).on('turbolinks:load', function () {
  $('.unselected').on('click', function() {
    $('.left, .right').toggleClass("selected unselected");
    $('#left_content, #right_content').toggle();
  });
});

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

質問文にあるとおり、動的に変更した DOM には、ページ表示時に設定したイベントが効かないため、質問文のような動作になっています。
他の回答にあるように、各要素が共有するクラス名でイベントを設定するか、jQuery のコードを以下のように修正することでこの問題は解決すると思います(動作確認用リンク)。

$(document).on("turbolinks:load", function() {
  $(document).on("click", ".unselected", function() {
    $(".left, .right").toggleClass("selected unselected");
    $("#left_content, #right_content").toggle();
  });
});

なぜ上記のコードでうまくいくのかは、以下の記事を読むとわかると思います。

• 【jQuery】onメソッドの使用方法 - Qiita
• イベントデリゲートで理解するjQueryのonメソッド - to-R

Comments

[T.Fujinaka]

回答ありがとうございます。
`selected`クラスを持つ要素をクリックした時は何も発火して欲しくなかったので非常に助かりました！
しかし上記のコードではイベントの発火自体が起こらず、以下のようにすれば正常に動きましたので念の為報告します。
```jQuery
$(document).on("click", ".unselected", function() {
$(".left, .right").toggleClass("selected unselected");
$("#left_content, #right_content").toggle();
});
```

Answer 2

おそらく、今のコードの書き方では、ページ読み込み時にunselectedクラスを持っている要素しかクリックイベントを持たない？

この理解で正しいです。
「unselectedクラス」ではなく、「タブが共通して持っているクラス」をフックにしてクリックイベントを設定すれば、選択状態に関わらず処理できます。

$(document).on('turbolinks:load', function () {
  $('.change_tab').on('click', function() {
    $('.left, .right').toggleClass("selected unselected");
    $('#left_content, #right_content').toggle();
  });
});

Answer 3

下記に変更してみてください

$('body').on('click', '.unselected', function() {
 // 処理
});

Answer 4

.change_tab にクリックイベントをつければよいのでは？

  $('.change_tab').on('click', function() {
    $('.left, .right').toggleClass("selected unselected");
    $('#left_content, #right_content').toggle();
  });