質問: ### 実現したいこと ボタンをクリックすると、jQueryに記載した反応が欲しいのです! toggleを使用しており、ボタンを押す度、表示/非表示を繰り返したいです。 しかし、クリックをする前のページ更新時点でjQuery反応が出てしまいます。 書き方やインデントに問題があるのでしょうか。 ``` $ -> $("#c1-link").click -> $("#c1").toggle(1000); $('textarea').first().focus(); ``` ``` <%= link_to "表示する", "#", id: "c1-link" %> <%= @post.content %> <%= @post.content2 %> <%= @post.content3 %> <%= @post.content4 %> ``` そして、下記のように記載すると、 ページ更新時にtoggleとfocusの反応があり、そのままtoggleで設定した速さ非表示されていきます。 ボタンをクリックするとc1のsectionが消えます。 再度クリックしても何も表示されません。 ``` #c1{ display:none; } ``` 逆に下記のようにdisplay:noneを消すと、 ページ更新時にtoggleとfocusの反応があり、そのままtoggleで設定した速さで非表示されていきます。 ボタンをクリックするとc1のsectionが表示されます。 再度クリックしても非表示になることはありません。 ``` #c1{ } ``` ### 追記 下記のように変更したところ、ボタンクリックを押したらしっかりとアラートが出ました。 toggleにした場合、反応が得られない謎はまだ続いています。 ``` $ -> $("#content1-link").click -> alert "クリック!" ``` ### 追記2 $(document).on 'turbolinks:load’で囲ってみた。 ``` $(document).on('turbolinks:load', function() { $ -> $("#c1-link").click -> $("#c1").toggle(1000); $('textarea').first().focus(); }); ```
回答: Turbolinksの影響は考えられないでしょうか? Turbolinksについての説明(検索して一番上にでてきたものです) もしそうなら、下記などを参考にturbolinks使用時のjQueryを実装してみてください。