質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.10%

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 143

tomtom1

score 64

実現したいこと

ボタンをクリックすると、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();
});
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

+1

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/10/11 03:40

    こちらこそ勘違いして申しわけないです。
    あぁ、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の最新版で実施しております。

    キャンセル

  • 2019/10/12 17:19

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

    キャンセル

  • 2019/10/12 18:01

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

    キャンセル

0

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/10/07 20:33 編集

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

    キャンセル

0

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つが正しいのかわからないので、両方試してみてください。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/10/07 22:26

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

    キャンセル

  • 2019/10/07 22:58

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.10%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる