【发布时间】：2015-05-10 00:24:21
【问题描述】：
我目前在使用 Rails 的 JavaScript 时遇到问题。我使用的是 Rails 4.1.8 版，并且我有一个下拉菜单，我在网上找到了使用 JavaScript 来控制它的下拉菜单。以前我在 app/config/initializers/assets 中分别预编译了所有 js 资产，但我认为这并不是处理它的正确方法。我现在在运行 rake assets:precompile 时将所有 js 添加到 application.js 中，但奇怪的是，即使我将 javascript_include_tag 更改为 application.js，单击文本和展开菜单的功能也不起作用。
我尝试使用 JavaScript 的视图代码：
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blueprint: Horizontal Drop-Down Menu</title>
<meta name="description" content="Blueprint: Horizontal Drop-Down Menu" />
<meta name="keywords" content="horizontal menu, microsoft menu, drop-down menu, mega menu, javascript, jquery, simple menu" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<%-#= stylesheet_link_tag 'component.css', :media => "all" -%>
<%-#= stylesheet_link_tag 'default.css', :media => "all" -%>
<%= stylesheet_link_tag 'application.css', :media => "all" %>
<!---<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr.custom.js"></script>---->
<%-#= javascript_include_tag 'modernizr.custom.js' -%>
<%= javascript_include_tag 'application.js' %>
<!---</head>
<body>--->
<div class="container">
<header class="clearfix">
<span>Catch phrase is catchy...</span>
<a><%= link_to image_tag 'Western-Maryland_AHEC_logo.png', controller: "home"%></a>
<h1>Heading</h1>
<!---<nav>
<a href="http://tympanus.net/Blueprints/FullWidthImageSlider/" class="icon-arrow-left" data-info="previous Blueprint">Previous Blueprint</a>
<a href="http://tympanus.net/codrops/?p=14426" class="icon-drop" data-info="back to the Codrops article">back to the Codrops article</a>
</nav>--not working for now-->
</header>
<div class="main">
<nav id="cbp-hrmenu" class="cbp-hrmenu">
<ul>
<li>
<a href="#">About</a>
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Views</h4>
<ul>
<li><a href="#">Mission</a></li>
<li><a href="#">Major Activities</a></li>
<li><a href="#">Strategic Action Plan</a></li>
</ul>
</div>
<div>
<h4>News</h4>
<ul>
<li><a href="#">Annual Reports</a></li>
<li><a href="#">Events</a></li>
</ul>
</div>
<div>
<h4>People</h4>
<ul>
<li><a href="#">Staff</a></li>
<li><a href="#">Board of Directors</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div><!-- /cbp-hrsub-inner -->
</div><!-- /cbp-hrsub -->
</li>
<li>
<a href="#">Caucuses</a>
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Dental</h4>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Meetings</a></li>
</ul>
<h4>Dietetic</h4>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Minutes</a></li>
<li><a href="#">Nutrition Resources</a></li>
<li><a href="#">Area Registered Dietitians Directory</a></li>
<li><a href="#">Western Maryland Regional Medical Center Dietitians</a></li>
</ul>
</div>
<div>
<h4>Massage Therapy</h4>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Minutes</a></li>
</ul>
</div>
<div>
<h4>Games</h4>
<ul>
<li><a href="#">Catch the Bullet</a></li>
<li><a href="#">Snoopydoo</a></li>
<li><a href="#">Fallen Angel</a></li>
<li><a href="#">Sui Maker</a></li>
<li><a href="#">Wave Master</a></li>
<li><a href="#">Golf Pro</a></li>
</ul>
</div>
</div><!-- /cbp-hrsub-inner -->
</div><!-- /cbp-hrsub -->
</li>
<li>
<a href="#">News and Events</a>
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Learning & Games</h4>
<ul>
<li><a href="#">Catch the Bullet</a></li>
<li><a href="#">Snoopydoo</a></li>
</ul>
<h4>Utilities</h4>
<ul>
<li><a href="#">Gadget Finder</a></li>
<li><a href="#">Green Tree Express</a></li>
<li><a href="#">Green Tree Pro</a></li>
<li><a href="#">Wobbler 3.0</a></li>
<li><a href="#">Coolkid</a></li>
</ul>
</div>
<div>
<h4>Education</h4>
<ul>
<li><a href="#">Learn Thai</a></li>
<li><a href="#">Math Genius</a></li>
<li><a href="#">Chemokid</a></li>
</ul>
<h4>Professionals</h4>
<ul>
<li><a href="#">Success 1.0</a></li>
<li><a href="#">Moneymaker</a></li>
</ul>
</div>
</div><!-- /cbp-hrsub-inner -->
</div><!-- /cbp-hrsub -->
</li>
<li>
<a href="#">Services</a>
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Learning & Games</h4>
<ul>
<li><a href="#">Catch the Bullet</a></li>
<li><a href="#">Snoopydoo</a></li>
<li><a href="#">Fallen Angel</a></li>
<li><a href="#">Sui Maker</a></li>
<li><a href="#">Wave Master</a></li>
<li><a href="#">Golf Pro</a></li>
</ul>
<h4>Utilities</h4>
<ul>
<li><a href="#">Gadget Finder</a></li>
<li><a href="#">Green Tree Express</a></li>
</ul>
</div>
<div>
<h4>Entertainment</h4>
<ul>
<li><a href="#">Gadget Finder</a></li>
<li><a href="#">Green Tree Express</a></li>
<li><a href="#">Green Tree Pro</a></li>
<li><a href="#">Holy Cannoli</a></li>
<li><a href="#">Wobbler 3.0</a></li>
<li><a href="#">Coolkid</a></li>
</ul>
</div>
</div><!-- /cbp-hrsub-inner -->
</div><!-- /cbp-hrsub -->
</li>
<li>
<a href="#">Resources</a>
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Utilities</h4>
<ul>
<li><a href="#">Green Tree Pro</a></li>
<li><a href="#">Wobbler 3.0</a></li>
<li><a href="#">Coolkid</a></li>
</ul>
<h4>Education</h4>
<ul>
<li><a href="#">Learn Thai</a></li>
<li><a href="#">Math Genius</a></li>
<li><a href="#">Chemokid</a></li>
</ul>
</div>
<div>
<h4>Professionals</h4>
<ul>
<li><a href="#">Success 1.0</a></li>
<li><a href="#">Moneymaker</a></li>
</ul>
</div>
<div>
<h4>Learning & Games</h4>
<ul>
<li><a href="#">Catch the Bullet</a></li>
<li><a href="#">Snoopydoo</a></li>
<li><a href="#">Fallen Angel</a></li>
<li><a href="#">Sui Maker</a></li>
<li><a href="#">Wave Master</a></li>
<li><a href="#">Golf Pro</a></li>
</ul>
</div>
</div><!-- /cbp-hrsub-inner -->
</div><!-- /cbp-hrsub -->
</li>
</ul>
</nav>
</div>
</div>
<!---<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/cbpHorizontalMenu.min.js"></script>---->
<%= javascript_include_tag 'https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' %>
<%-#= javascript_include_tag 'cbpHorizontalMenu.min.js' -%>
<script>
$(function() {
cbpHorizontalMenu.init();
});
</script>
</head>
<body>
<%= link_to root_url do %>
<%= image_tag 'Western-Maryland_AHEC_logo.png'%> <!--, width: 136, height: 67, alt: 'Western Maryland Area Health Education Center'%> -->
<% end %>
</body>
</html>
我预编译的 application.js 中的 JavaScript 看起来像：
var cbpHorizontalMenu = (function() {
var $listItems = $( '#cbp-hrmenu > ul > li' ),
$menuItems = $listItems.children( 'a' ),
$body = $( 'body' ),
current = -1;
function init() {
$menuItems.on( 'click', open );
$listItems.on( 'click', function( event ) { event.stopPropagation(); } );
}
function open( event ) {
if( current !== -1 ) {
$listItems.eq( current ).removeClass( 'cbp-hropen' );
}
var $item = $( event.currentTarget ).parent( 'li' ),
idx = $item.index();
if( current === idx ) {
$item.removeClass( 'cbp-hropen' );
current = -1;
}
else {
$item.addClass( 'cbp-hropen' );
current = idx;
$body.off( 'click' ).on( 'click', close );
}
return false;
}
function close( event ) {
$listItems.eq( current ).removeClass( 'cbp-hropen' );
current = -1;
}
return { init : init };
我觉得这是一个愚蠢的问题，但我完全不知道为什么当我单独预编译这些资产时它会起作用，但当我尝试使用 application.js 引用它们时它不起作用
任何帮助将不胜感激，谢谢！
【问题讨论】：
-
尝试在 jquery 之后移动 application.js。您的 application.js 正在引用 jquery 的“$”，看起来您的 javascript 并没有等待页面的其余部分被加载，所以它不知道该怎么做。
-
页眉和页脚有脚本标签。这很令人困惑，我不明白你为什么这样做。正如之前的评论所建议的，在代码中引入一些顺序并在使用之前包含 jQuery。
-
我将 jQuery 移到 application.js 上方，但仍然存在同样的问题。在原始 html 代码中，它看起来包含 3 个 JavaScript。它查找modernizer.js、jQuery，然后是具有我上面列出的功能的脚本。是否有必要按该顺序加载它们？如果是这样，如何使用 Rails 完成？
标签： javascript html ruby-on-rails-4 asset-pipeline