jQuery在Rails应用程序的application.html.erb页面上不起作用

Question

我试图使用我的application.html.erb文件中<script>标记中的某些jQuery触发单击事件，但是什么也没有发生。 我的整个application.html.erb文件是：

<!DOCTYPE html>
<html>
<head>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">   </script>


 <%= stylesheet_link_tag    'application', media: 'all' %>
 <%= javascript_include_tag 'application' %>
 <script src="https://use.fontawesome.com/ab1ae4c50b.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.0.0/ekko-lightbox.css"></script>
<link href="https://fonts.googleapis.com/css?family=Satisfy|Quattrocento|Quicksand" rel="stylesheet">

<%= csrf_meta_tags %>
<script>
    $(document).on('click', 'a', function(){
      console.log("yo");
       $('.nav li').removeClass();
       $($(this).attr('href')).addClass('active');

 });
</script>
</head>
 <body>

<nav class="navbar navbar-default homenav">
<div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar top-bar"></span>
        <span class="icon-bar middle-bar"></span>
        <span class="icon-bar bottom-bar"></span>
      </button>

     </div><!--navbar-header-->
   <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
     <ul class="nav navbar-nav nav-det">
        <li><%=link_to '<i class="fa fa-home" aria-hidden="true"></i><br>home'.html_safe, root_path%></a>
       <li><%= link_to '<i class="fa fa-paper-plane-o" aria- hidden="true"></i><br>go'.html_safe, page_path('location') %></li>
         <li><%=link_to '<i class="fa fa-bed" aria-hidden="true"></i>    <br>stay'.html_safe, page_path('hotels') %></li>
         <li><%= link_to '<i class="fa fa-clone" aria-hidden="true"></i><br>play'.html_safe, page_path('game'), {:class=>"thing"} %></li>
        <li><%= link_to '<i class="fa fa-heart-o" aria-hidden="true"></i><br>the big day'.html_safe, page_path('info') %></li>
       <li><%= link_to '<i class="fa fa-hand-peace-o" aria-hidden="true"></i><br>Davey/Leesy'.html_safe, page_path('about') %></li>
       <li><%= link_to '<i class="fa fa-gift" aria-hidden="true"></i><br>registry'.html_safe, page_path('registry') %></li>
        <li><%= link_to  '<i class="fa fa-envelope-o" aria-hidden="true"></i><br>rsvp'.html_safe, '/login' %></li>

    </ul>
  </div><!--collapse-->

</div><!--container-->
 </nav>


 <%= yield %>

</body>
</html>

奇怪的是，当我尝试使用$(document).load(function(){而不是click事件）时，我将获得控制台日志。但是，我无法弄清楚为什么click事件无法正常工作！标题，从我的Gemfile中，我的application.js文件是：

   // This is a manifest file that'll be compiled into application.js,  which will include all the files
  // listed below.
  //
  // Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
  // or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
  //
  // It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
  // compiled file.
  // 
  // Read Sprockets README (https://github.com/rails/sprockets#sprockets- directives) for details
  // about supported directives.
 //
 //= require jquery
 //= require jquery_ujs


//= require_tree .

我缺少链轮吗？

我还在其他视图上的脚本标签中也有jQuery，并且效果很好-只是在此视图上不起作用。 有趣的是，当我也尝试使用CSS修改这些li时，我没有做任何更改—就像我也无法通过CSS访问它们一样！

Answer 1

尝试在body标签而不是head标签中编写以下代码：

<script>
    $(document).on('click', 'a', function(){
      console.log("yo");
       $('.nav li').removeClass();
       $($(this).attr('href')).addClass('active');

 });
</script>

jQuery在Rails应用程序的application.html.erb页面上不起作用

问题描述

1 个解决方案

解决方案1
0 2017-01-09 11:03:23

jQuery在Rails应用程序的application.html.erb页面上不起作用

问题描述

1 个解决方案

解决方案1 0 2017-01-09 11:03:23

解决方案1
0 2017-01-09 11:03:23