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(){而不是点击事件时，我会得到我的控制台日志。但我无法弄清楚为什么我的点击事件不起作用！我从头文件和我的Gemfile中删除了turbolink，我的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 个答案: