jQuery クリックをする前に反映されてしまう

Question

###実現したいこと
ボタンをクリックすると、jQueryに記載した反応が欲しいのです！
toggleを使用しており、ボタンを押す度、表示/非表示を繰り返したいです。

しかし、クリックをする前のページ更新時点でjQuery反応が出てしまいます。
書き方やインデントに問題があるのでしょうか。

$ ->
  $("#c1-link").click ->
  $("#c1").toggle(1000);
  $('textarea').first().focus();

<%= link_to "表示する", "#", id: "c1-link" %>
   <section id="c1">
     <textarea name="content" placeholder="入力1"><%= @post.content %></textarea>
     <textarea name="content2" placeholder="入力2"><%= @post.content2 %></textarea>
     <textarea name="content3" placeholder="入力3"><%= @post.content3 %></textarea>
     <textarea name="content4" placeholder="入力4"><%= @post.content4 %></textarea>
   </section>

そして、下記のように記載すると、
ページ更新時に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();
});

Answer 1

Turbolinksの影響は考えられないでしょうか？

Turbolinksについての説明（検索して一番上にでてきたものです）
https://www.ryotaku.com/entry/2019/01/15/213420

もしそうなら、下記などを参考にturbolinks使用時のjQueryを実装してみてください。
https://qiita.com/hirocueki2/items/4f3ff07015fa3edb139a

Comments

[siruku6]

alertが反応しているということなので、turbolinksの可能性は低そうな気もします....
ただ、確実なことは言えないのでやってみないとわからないですよね。

[no1knows]

gemにturbolinksがあって、jQueryを利用するのであれば、まず疑うところかと思います。
上記の構成でturblinks用のコードを書いてない事自体が問題だと思います。

turbolinksはきちんと設定すれば、非常に良い仕組みなのですが、設定していないと変な挙動（実行されたり、されなかったり）になりがちで混乱します。

単に$(document).on 'turbolinks:load’で囲うだけなのでやってみてはいかがでしょうか？

[tomtom1]

no1knowsさん、
ありがとうございます。
単に$(document).on 'turbolinks:load’で囲うだけなのでやってみてはいかがでしょうか？
→ご教示頂いたようにしたのですが、エラーが出てしまいます。
　追記に記載しました。囲い方は合ってますでしょうか？

[tomtom1]

因みに、一番目のURLに記載のturbolinksを全体で無効にする方法を真似たら、無事解決しました。

[no1knows]

解決してよかったです。

coffeeスクリプトと普通のjqueryが混じっていることで、きちんと実行できないんだと思います。
たぶん下記のような感じかと思いますが・・・coffeeスクリプトは、自信がありません。

$(document)
.on 'turbolinks:load', ->
$("#c1-link").click ->
$("#c1").toggle(1000);
$('textarea').first().focus();

もし勉強を始めたばかりまたは業務で必須でなければcoffeeスクリプトは利用しないほうが良いかもしれません。
Rails6からは標準で実装されなくなっています。

またフロントまでRailsで作るのであれば、ページ遷移の速度が段違いなのでTurbolinksはつけておいたほうが良いと思います。
昔は、思ったとおりに利用できなかったりして外すほうが良いとの意見が多かった（＝記事が多い）ようですが、Rails5以上であればjQueryにただ$(document).on 'turbolinks:load’をつければ、期待通りの動きをするはずです。

[tomtom1]

細かくご教示頂きありがとうございます。大変助かってます。
可能であればTurbolinksは残しておきたいですね。

$(document)
.on 'turbolinks:load', ->
$("#c1-link").click ->
$("#c1").toggle(1000);
$('textarea').first().focus();

※インデントなし、.onの前に改行、fileはcoffeeのまま

で挑戦しました。
そしたら、クリック押す前のページ更新時に、toggleとfocusの反応がでます。
なので、下2行にインデント2つずつ足しましたが、今度は反応が得れないという結果でした。

[no1knows]

HTML側に問題があったため期待通りの動作ができなかったんだと思います。

✗　<%#= link_to "表示する", "#", id: "c1-link" %>
◯　<span id="c1-link">表示する</span>

spanは、CSSでマウスオーバーの時に、アンダーラインを入れるなどうまく装飾してください。

jQueryは下記で大丈夫なので、たぶんご提示いただいたcoffeescriptで大丈夫だと思います。
$(document).on('turbolinks:load', function() {
$('#c1-link').click(function(event) {
$('#c1').toggle();
$('textarea').first().focus();
console.log('クリックされました！');
})
})

[no1knows]

では、なぜご提示頂いたコードで問題だったかというと、
「表示する」ボタンが<a>タグだったので、toggleでC1を表示しようとしている最中に別のページへ遷移したためです。
toggle(1000)をtoggle()に変更してもらうと、動作の早いパソコンなら、#C1が一瞬表示され、きえていくのが確認できるかと思います。
あくまで<a>タグはページ遷移をベースとして使われるので、今回はspanなどが好ましいと思います。

[no1knows]

脱線しますが、今後、Rails6でjQueryやBootstrapを利用するなら下記も確認いただくとよいかと思います。
https://teratail.com/questions/214227#reply-315714

[tomtom1]

本当に細かに教えて頂き大変恐縮です！ありがとうございます。

✗　<%#= link_to "表示する", "#", id: "c1-link" %>
◯　<span id="c1-link">表示する</span>
上記の点についてですが、a→spanにした場合、
クリックを押せなくなってしまうのですが、spanにクリック機能をつけるやり方があるのでしょうか?

[no1knows]

spanにした状態で、文字の上でクリックしてみましたか？
まず上記を一度やってみてください。

それで動かないようならcoffeescriptがおかしいので、とりあえず、coffeeを削除して、application.jsに当方が提示したコードを記載してみてください。

その上で

＞spanは、CSSでマウスオーバーの時に、アンダーラインを入れるなどうまく装飾してください。

と記載した通り、spanだけではクリックできないような感じに見えてしまいます。
そのためCSSなどでうまく装飾すると<a>タグと同じような形になります。

参考：https://beginners-high.com/css-hover-change/
#c1-link {
font-weight: bold;
padding: 5px 10px;
background-color: #b1eeff;
cursor: pointer;
cursor: hand;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#c1-link:hover {
background-color: #ffc9d7;
}

細かいことを言うと、「表示する」という文字をクリックしたら、「表示しない」になるとユーザーにとっては尚、わかりやすくなりそうですね。

いつでも「まずは自分でやってみる」、「困っているキーワードを組み合わせて調べてみる」癖を身につけるようにすると良いかと思います。

[tomtom1]

更に細かくお教え頂きありがとうございます！
自分で調べてやってみた点も加えればよかったですね、すみません！

他のサイトでもspanでクリックできるようにしたと記載のサイトもありましたため、実際にいくつかのサイトを参考に実装してみたのですが、クリックに全く反応を示さなかったので、特別にクリックに反応するような記載が必要なのかと疑問に思い、ご質問した経緯があります！

改めて分かった事が、前回にturbolinksを全体で無効にしたバージョンではspanで完全に反応示しました。
つまりは、spanでクリックができないのではなく、今回はturbolinks有効にしていたため反応が得れませんでした。
お教え頂いたように、coffeeを削除して、application.jsに当方が提示したコードを記載したのですが、これもまた反応がありませんでした。（インデントも様々に変えてトライしてみましたが反応ありませんでした）

[no1knows]

こちらこそ勘違いして申しわけないです。
あぁ、application.jsに記載するのは、僕が記載したコードです。
お時間をかけさせてしまい恐縮です。

コードを書いて、動作確認してからコメントしていたので共有しますね。
https://github.com/no1-knows/jquery_click_with_turbolinks

見てもらえればわかりますが、各バージョンはRuby2.6.3、rails5.2.3。
application.html.erbにHTMLを記載し、@post.contentは、入力1という文字に変更。
application.jsにjQueryを記載し、動作確認はChromeの最新版で実施しております。

[tomtom1]

ご回答ありがとうございます！！無事解決しました！
わざわざ時間を作ってくださり、githubまで手配頂き、手間をおかけしました！
本当にありがとうございます！

[no1knows]

解決したようで良かったです。

Answer 2

coffeescriptは、ブロックをインデントで表現するらしいです
CoffeeScript入門メモ

なので、

$ ->
  $("#c1-link").click ->
  $("#c1").toggle(1000);
  $('textarea').first().focus();

これだと、 $("#c1-link").click ->以下がブロック扱いされていないかもしれません。
（だから即時実行されているのかも）

次のようにしてみてはどうでしょう

$ ->
    $("#c1-link").click ->
        $("#c1").toggle(1000);
        $('textarea').first().focus();

※スペースの数は、4つが正しいのか2つが正しいのかわからないので、両方試してみてください。

Comments

[tomtom1]

ありがとうございます。スペースの数は、4つと２つで両方試したのですが、指定した反応は得られませんでした。

[tomtom1]

参考に試行錯誤してみましたところ、少し把握出来ました！
追記に追加しました。

Answer 3

「#c1」のcssはいらなくないですか？
あえてやるなら

<section id="c1" style="display:none">

Comments

[tomtom1]

ありがとうございます。その通りでした。
ですが、cssでなくstyleでdisplay:noneを追加しても、現在の状況が変わりませんでした泣。