Javascript jQuery无法在Rails应用程序的application.html.erb页面上运行_Javascript_Jquery_Ruby On Rails_Ruby

Javascript jQuery无法在Rails应用程序的application.html.erb页面上运行

javascript jquery ruby-on-rails ruby

Javascript jQuery无法在Rails应用程序的application.html.erb页面上运行,javascript,jquery,ruby-on-rails,ruby,Javascript,Jquery,Ruby On Rails,Ruby,我正试图用一些jQuery在我的application.html.erb文件的标记中触发一个单击事件，但什么都没有发生。我的整个application.html.erb文件是： <!DOCTYPE html> <html> <head> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> <scri

我正试图用一些jQuery在我的application.html.erb文件的

标记中触发一个单击事件，但什么都没有发生。我的整个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>

我丢失链轮了吗

我在其他视图的脚本标记中也有jQuery，这很好——只是在这个视图中不起作用。有趣的是，当我尝试用CSS修改这些li时，我所做的一切都不会改变它们——就像我也不能通过CSS访问它们一样

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

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

 });
</script>


$（文档）。在（'click'，'a'，function（）上{
控制台日志（“yo”）；
$（'.nav li'）.removeClass（）；
$（$（this.attr（'href'））.addClass（'active'）；
});

您能发布整个

application.html.erb

和

application.js

清单文件吗？您是否也从清单中删除了require TurboLink？您可以检查它是否是turbolink仍在运行的问题，将

$（文档）。就绪（function（）{

更改为

$（文档）。在（“就绪页：加载”）上，function（）{

并检查它是否工作。您是否尝试查看浏览器控制台？您可以改为使用

$（文档）将其更改为委托事件处理程序。在（'click'，a'，function（））{ /* ... */ })；

。在这种情况下，您无需等待文档准备就绪，它将在turbolinks访问中运行。@max这对我来说没有任何改变。@mrlew我更新了我的问题，以包括我的整个应用程序.html.erb和我的清单JS，它们也没有任何改变。请尝试在document.ready函数下添加click函数，如$（document）.ready（函数（）{//add click函数}）仍然没有。有趣的是，我还尝试用CSS修改这些列表项，但也无法通过CSS访问它们！请更正以下代码：

添加

，而不是尝试在单击函数下添加警报。您在单击函数下尝试做的是添加removeClass，但没有提及要删除的类。检查代码：$（“.nav li”）.removeClass（）；也可以在href中添加活动类？？？选中：$（$（this.attr（'href'））.addClass（'active'）；

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

 });
</script>