jQuery не работает на странице application.html.erb в приложении Rails

Я пытаюсь вызвать событие при щелчке с помощью некоторого jQuery, который находится только в тегах <script> в моем файле application.html.erb, но ничего не происходит. Весь мой файл application.html.erb является:jQuery не работает на странице application.html.erb в приложении Rails

<!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(){ вместо события щелчка, я получу журнала консоли. Я не могу понять, почему мой клик не будет работать, хотя! Я удалил turbolinks из заголовка и из моего 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, я ничего не меняю - это похоже на то, что я не могу получить к ним доступ через CSS!

источник

2017-01-08 bjorkland

Вы можете разместить весь свой '' application.html.erb' и application.js' файл манифеста? Удалены ли вы из турбины из турбины? Вы можете проверить, является ли это проблемой turbolink-still-in-action, изменяющей '$ (document) .ready (function() {' to '$ (document) .on (" ready page: load ", function() {' и проверьте, работает ли он. – mrlew

Вы пытались найти консоль браузера? Вместо этого вы можете изменить это на делегированный обработчик событий с помощью '$ (document) .on ('click', 'a', function() {/ * .. . * /}); '. Вам не нужно ждать, когда документ будет готов в этом случае, и он будет работать через турболинки. – max

@max ничего не изменил для меня. – bjorkland

Попробуйте написать ниже код в тело тега вместо головы тег:

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

}); 
</script>

источник

2017-01-09 11:03:23 puneet18

, который ничего не изменил. – bjorkland

попытайтесь добавить функцию щелчка в функции document.ready, например $ (document) .ready (function() { // добавить функцию щелчка }) – puneet18

все еще ничего. Интересно, что я также пытался изменить эти элементы списка с помощью CSS и не могу получить к ним доступ через CSS! – bjorkland

jQuery не работает на странице application.html.erb в приложении Rails

ответ

Смежные вопросы