Jquery イベント発火はしているが、処理が行われない

Question

イベント発火しているのに、アクションが実行されない

<%= f.time_select :mon_start, minute_step: 10, class: "checked_mon_off" %>
<%= f.time_select :mon_finish, minute_step: 10, class: "checked_mon_off" %>
<%= f.check_box :mon_off, class: "check_mon_off" %>

<script>
  $(function(){
    $('.check_mon_off').on('click', function(){
      $('.checked_mon_off').toggle();
      alert('Button is clicked');
    });
  });
</script>

やりたいこと

jqueryで「check_mon_off」を発火させて、「checked_mon_off」要素を表示・非表示処理させたい

実行すると、alartは実行されるので、イベント発火はしているようです。
なのに、toggleで表示・非表示が実行されません。

なぜなのかググっても分からなかったので、お返事お待ちしております。

Comments

[maisumakun]

JavaScriptのほうは、どのようなコードを書きましたか？

[komurin]

jsのコードを書きました！

Answer 1

<div class="check_mon_off">1</div>
<div class="checked_mon_off">2</div>
<div class="checked_mon_off" style="display:none">3</div>

Comments

[yambejp]

check_mon_offとchecked_mon_offは違うものですよね？
1をクリックすると2と3が順番に表示されます。

[komurin]

はい、違うものです。
できました。ありがとうございました！
divで囲わないといけないのでしょうかね？

[yambejp]

Rubyに疎いのでどういうHTMLが出力されるのかわかりません。
div以外でもいけると思いますが・・・