javascript_include_tagの配置場所によって動かなくなる

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

<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
をheadタグに書くとjavascriptが動かず、bodyタグに書くと正常に動きます。何が原因なんでしょうか。

該当のソースコード

Javascript
1$('h1.test').click(function() {
2    $(this).css("background-color", "blue");
3});

HTML
1<h1 class="test">test</h1>

HTML
1<!DOCTYPE html>
2<html>
3  <head>
4    <title>OmniauthTest</title>
5    <%= csrf_meta_tags %>
6    <%= csp_meta_tag %>
7
8    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
9    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
10
11  </head>
12
13  <body>
14    <%= yield %>
15  </body>
16</html>
17

#assets/javascripts/application.js

//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require jquery
//= require_tree .

行動規範の内容に同意します

回答1件

ベストアンサー

h1出現前だからです。前に書いても大丈夫な書き方をしても動かせます。

jQuery
1$(document).on('click', 'h1.test', function() {
2    $(this).css("background-color", "blue");
3});

https://api.jquery.com/on/

jQuery
1$(function() {
2    $('h1.test').click(function() {
3        $(this).css("background-color", "blue");
4    });
5});

https://api.jquery.com/jQuery/#jQuery3

投稿2019/05/20 04:49

x_x

総合スコア13749

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

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

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

javascript_include_tagの配置場所によって動かなくなる

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

該当のソースコード

関連した質問