javascript - jquery not working in rails

I've read many pages about using jquery in rails and still can't seem to get it to work.

I have the 'jquery-rails' gem, and I installed. I have the require statements in the application.js file.

Here is a test page I keep running:

<!DOCTYPE html>
 <html>
 <head>
<title><%= yield(:title)%></title>
<%= javascript_include_tag 'application','jquery', 'data-turbolinks-track' => true  %>
<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<script>$(document).ready(function(){
  $(".bg-info").click(function(){
    $(this).hide();
});
 });</script>
</head>
<body>
<center>
<h1 class="bg-info"><%= yield(:title)%></h1>
</center>
</body>
</html>

But when I click on the "bg-info" text in the browser I get no response.

I've read many pages about using jquery in rails and still can't seem to get it to work.

I have the 'jquery-rails' gem, and I installed. I have the require statements in the application.js file.

Here is a test page I keep running:

<!DOCTYPE html>
 <html>
 <head>
<title><%= yield(:title)%></title>
<%= javascript_include_tag 'application','jquery', 'data-turbolinks-track' => true  %>
<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<script>$(document).ready(function(){
  $(".bg-info").click(function(){
    $(this).hide();
});
 });</script>
</head>
<body>
<center>
<h1 class="bg-info"><%= yield(:title)%></h1>
</center>
</body>
</html>

But when I click on the "bg-info" text in the browser I get no response.

Share Improve this question edited Nov 1, 2015 at 15:39 Nakilon 35.1k16 gold badges111 silver badges148 bronze badges asked Oct 27, 2015 at 23:10 Ester Lin 6172 gold badges7 silver badges20 bronze badges

this is a stretch but in your assets/javascripts/application.js, do you have the following line: //= require jquery . Or maybe bundle install? – philip yoo Commented Oct 27, 2015 at 23:22
Can you try the following: <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>. Remove jquery from that line, restart server, and try running – philip yoo Commented Oct 27, 2015 at 23:33
Try running rake assets:clobber. Maybe there are some asset cache problems – yivo Commented Oct 27, 2015 at 23:34
Open developer console in your browser and try to execute $(".bg-info").length (on that page where bg-info is located) – Src Commented Oct 27, 2015 at 23:39
Can you include your application.js file? – Graham S. Commented Oct 28, 2015 at 3:17

Add a ment |

1 Answer 1

Sorted by: Reset to default 6

Here's what you should have:

#app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require_tree .

$(document).on("click", ".bg-info", function(e){
   $(this).hide();
});

Here's what I'd do for the layout (to test):

#app/views/layouts/application.html.erb
<!DOCTYPE html>
 <html>
   <head>
       <title><%= yield(:title)%></title>
       <%= javascript_include_tag 'application','jquery', 'data-turbolinks-track' => true  %>
       <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
       <%= csrf_meta_tags %>
   </head>
   <body>
       <div class="bg-info"><%= yield(:title)%></div>
   </body>
</html>

If the above doesn't work out the box, you'll probably have an issue with your development environment (OS) -- most likely with ExecJS.

To confirm this, you'll need to debug your developer's console:

To access the dev console, right-click > inspect element > console.

This shows you any errors with your JS & your front-end environment. If any errors appear, they may tell you what the issue is.

If no errors appear, you should try installing NodeJS on your system, as this ensures Rails can use the appropriate JS executable.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - jquery not working in rails - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)