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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

3回答

1535閲覧

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

tomtom1

総合スコア168

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2019/10/07 11:13

編集2019/10/09 07:07

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

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

postcoffee

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

html

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

そして、下記のように記載すると、
ページ更新時にtoggleとfocusの反応があり、そのままtoggleで設定した速さ非表示されていきます。
ボタンをクリックするとc1のsectionが消えます。
再度クリックしても何も表示されません。

css

1#c1{ 2 display:none; 3}

逆に下記のようにdisplay:noneを消すと、
ページ更新時にtoggleとfocusの反応があり、そのままtoggleで設定した速さで非表示されていきます。
ボタンをクリックするとc1のsectionが表示されます。
再度クリックしても非表示になることはありません。

css

1#c1{ 2}

###追記
下記のように変更したところ、ボタンクリックを押したらしっかりとアラートが出ました。
toggleにした場合、反応が得られない謎はまだ続いています。

postcoffee

1$ -> 2 $("#content1-link").click -> 3 alert "クリック!"

###追記2

$(document).on 'turbolinks:load’で囲ってみた。

coffee

1$(document).on('turbolinks:load', function() { 2 $ -> 3 $("#c1-link").click -> 4 $("#c1").toggle(1000); 5 $('textarea').first().focus(); 6});

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

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

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

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

投稿2019/10/08 00:22

no1knows

総合スコア3365

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

siruku6

2019/10/08 03:48

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

2019/10/08 04:00

gemにturbolinksがあって、jQueryを利用するのであれば、まず疑うところかと思います。 上記の構成でturblinks用のコードを書いてない事自体が問題だと思います。 turbolinksはきちんと設定すれば、非常に良い仕組みなのですが、設定していないと変な挙動(実行されたり、されなかったり)になりがちで混乱します。 単に$(document).on 'turbolinks:load’で囲うだけなのでやってみてはいかがでしょうか?
tomtom1

2019/10/09 07:05

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

2019/10/09 07:10

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

2019/10/09 07:27

解決してよかったです。 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

2019/10/09 10:30 編集

細かくご教示頂きありがとうございます。大変助かってます。 可能であればTurbolinksは残しておきたいですね。 $(document) .on 'turbolinks:load', -> $("#c1-link").click -> $("#c1").toggle(1000); $('textarea').first().focus(); ※インデントなし、.onの前に改行、fileはcoffeeのまま で挑戦しました。 そしたら、クリック押す前のページ更新時に、toggleとfocusの反応がでます。 なので、下2行にインデント2つずつ足しましたが、今度は反応が得れないという結果でした。
no1knows

2019/10/09 12:54 編集

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

2019/10/09 13:00

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

2019/10/09 16:45

本当に細かに教えて頂き大変恐縮です!ありがとうございます。 ✗ <%#= link_to "表示する", "#", id: "c1-link" %> ◯ <span id="c1-link">表示する</span> 上記の点についてですが、a→spanにした場合、 クリックを押せなくなってしまうのですが、spanにクリック機能をつけるやり方があるのでしょうか?
no1knows

2019/10/09 22:54 編集

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

2019/10/10 16:41

更に細かくお教え頂きありがとうございます! 自分で調べてやってみた点も加えればよかったですね、すみません! 他のサイトでもspanでクリックできるようにしたと記載のサイトもありましたため、実際にいくつかのサイトを参考に実装してみたのですが、クリックに全く反応を示さなかったので、特別にクリックに反応するような記載が必要なのかと疑問に思い、ご質問した経緯があります! 改めて分かった事が、前回にturbolinksを全体で無効にしたバージョンではspanで完全に反応示しました。 つまりは、spanでクリックができないのではなく、今回はturbolinks有効にしていたため反応が得れませんでした。 お教え頂いたように、coffeeを削除して、application.jsに当方が提示したコードを記載したのですが、これもまた反応がありませんでした。(インデントも様々に変えてトライしてみましたが反応ありませんでした)
no1knows

2019/10/10 18: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の最新版で実施しております。
tomtom1

2019/10/12 08:19

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

2019/10/12 09:01

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

0

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

なので、

coffee

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

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

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

coffee

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

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

投稿2019/10/07 12:32

編集2019/10/08 03:45
siruku6

総合スコア1382

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tomtom1

2019/10/07 13:26

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

2019/10/07 13:58

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

0

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

HTML

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

投稿2019/10/07 11:21

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tomtom1

2019/10/07 11:33 編集

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問