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

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

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

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

jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

jQuery

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

Q&A

解決済

2回答

2946閲覧

Rails jquery-uiを入れたら、jqueryのonメソッドが発火しなくなった。

yamaoka_san

総合スコア22

Ruby on Rails 5

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

jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

jQuery

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

0グッド

1クリップ

投稿2019/04/02 00:32

前提・実現したいこと

Railsにgemでjqueryを入れ、順調に動きました。
その後jquery-uiも入れて、ドラックアンドドロップをつけました。
jqueryのonメソッドを追加したところ、それだけが動きません。

発生している問題・エラーメッセージ

エラーは表示されません。
onメソッドでクリックで色が変わるようにしているのですが、クリックにしてもマウスオーバーにしてもダメでした。

該当のソースコード

[application.js] //= require jquery //= require jquery-ui //= require jquery.turbolinks //= require rails-ujs //= require turbolinks //= require activestorage //= require_tree .
[application.css] *= require jquery-ui *= require_tree . *= require_self
[application.html] <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => 'reload' %> <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
[html.erb] //省略 //.anime_testはjqueryが動くか実験で作った要素です。 <p class="anime_test"></p> <p class="t_test">クリックしましょう</p> //以下にドラックアンドドロップの機能。
[.js] $(document).ready(function(){ $(".t_test").css({'color':'yellow'}); $("p.anime_test").delay(2000).animate({'background-color':'red'},2000); //この部分だけが動かない。エラーも何も出ない。 $("p.t_test").on('click', function(){ $("p.t_test").css({'color':'red'}); }); });

試したこと

①.jsにp要素を表記したり、spanに変更してみた。
②html.erbの外部ライブラリ(script部分)を最後の行に移動→エラー。ドラックアンドドロップが定義されてないと表示。今の位置に戻すと、エラー消えるけどonメソッドは使えない。
③gemのturbolinksが悪さをする噂を聞き、外してみるけど、結果は変わらない。
④.onを.clickに書き換えたけれど、動かない。

補足情報(FW/ツールのバージョンなど)

アニメーションなどは動くのに、なぜonとクリックがダメなのか。。。ドラックアンドドロップを入れると、マウス操作にこのような制約が出るものなのでしょうか??

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

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

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

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

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

guest

回答2

0

自己解決

出来ました!!色々試した結果:
onメソッドは、コードを最初の方に書く。ということ。

ドラックアンドドロップなどのuiよりも先に、onメソッドなどのjqueryは動作を確認しつつ組み込んだ方が良いのですね。途中から突貫工事的に入れると、動かない。。。orz

私の場合は、全てビューファイルを作り直して、最後にドラックアンドドロップを入れました。
とっても勉強になりました。

投稿2019/04/05 14:36

yamaoka_san

総合スコア22

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

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

0

ドラッグアンドドロップの機能というのがなにかおかしいのでしょう
以下普通に動きます
queue-dequeueでやってみるとかですかねぇ・・・

javascript

1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 2<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 3<script> 4$(function(){ 5 $(".t_test").css({'color':'yellow'}).on('click', function(){ 6 $(this).css({'color':'red'}); 7 }); 8 $("p.anime_test").delay(2000).queue(function(){ 9 $(this).animate({'background-color':'red'},2000).dequeue(); 10 }); 11}); 12</script> 13<p class="anime_test">anime_test</p> 14<p class="t_test">クリックしましょう</p>

投稿2019/04/02 06:07

yambejp

総合スコア114572

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

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

yamaoka_san

2019/04/04 00:29 編集

回答ありがとうございます。 アニメーションは動くんです。でもonメソッドがクリックして色が変わらないのです。ひょっとして、再現するとonメソッドは問題なく動くんでしょうか?? とすると、コードも問題なく、railsの設定も特に問題ないのですよね。。。私のPCだけ挙動がおかしいのでしょうか。 試しに設置してみた、rootへのリンクも動きません。 <%= link_to "リンク張るテスト", root_path %> クリックしても何も起こりません。エラーもありません。 リンクを貼る事全般がダメになっているのかも。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問