插件无法在 Rails 4 上运行

Question

我已经安装了一个模板，除了一些 javascript 之外一切正常，但是当我检查 javascript 的编译列表时，我看到所有文件都已加载并且 css 具有所有正确的文件。排除故障并找出如何让 js 加载并找出问题所在的最佳方法是什么？

这是我的 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 vendor/assets/javascripts of plugins, if any, 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/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require jquery.purr
//= require best_in_place
//= require bootstrap
//= require turbolinks
//= require js/template
//= require bootstrap/js/bootstrap
//= require plugins/rs-plugin/js/jquery.themepunch.revolution
//= require plugins/rs-plugin/js/jquery.themepunch.enablelog
//= require plugins/isotope/isotope.pkgd
//= require magnific-popup
//= require plugins/SmoothScroll
//= require plugins/modernizr
//= require plugins/jquery.validate
//= require plugins/jquery.parallax-1.1.3
//= require plugins/jquery.min
//= require plugins/jquery.knob.min
//= require plugins/jquery.countTo
//= require plugins/jquery.browser
//= require owl.carousel
//= require js/custom
//= require js/coming.soon.config
//= require js/google.map.config
//= require bootstrap/js/bootstrap.min
//= require bootstrap/js/npm
//= require plugins/bootstrap-notify/bootstrap-notify.min
//= require_tree ../../../vendor/assets/template/bootstrap/js
//= require_tree ../../../vendor/assets/template/js
//= require_tree ../../../vendor/assets/template/plugins/bootstrap-notify
//= require_tree ../../../vendor/assets/template/plugins/charts
//= require_tree ../../../vendor/assets/template/plugins/jasny-bootstrap/js
//= require_tree ../../../vendor/assets/template/plugins/jquery.countdown
//= require_tree ../../../vendor/assets/template/plugins/morphext
//= require_tree ../../../vendor/assets/template/plugins/vide
//= require_tree ../../../vendor/assets/template/plugins

这也是我的 application.css.scss 文件

@import "bootstrap";
@import "css/style";
@import "plugins/rs-plugin/css/settings-ie8";
@import "css/animate";
@import "plugins/rs-plugin/css/settings";
@import "css/animations";
@import "font-awesome";
@import "fontello";
@import "plugins/morphext/morphext";


 /*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 *= require magnific-popup
 *= require owl.carousel
 *= require owl.theme
 *= require owl.transitions
 *= require_directory ./plugins/hover
 *= require animate
 *= require jquery.countdown
 *= require 'bootstrap/css/bootstrap.css'
 *= require '/fonts/font-awesome/font-awesome.scss'
 *= require_directory ./fonts/fontello/css
 *= require_directory ./plugins/jasny-bootstrap/css
 *= require_directory ./plugins/morphext
 *= require_directory ./css/skins
 *= require_directory ./css
 *= require hover
 */

页面应该是这样的http://htmlcoder.me/preview/the_project/v.1.1/template/features-sliders-video-background.html#

但滚动视频不起作用或在框上淡入。不知道先做什么。

这是控制台显示的内容

WelcomeController#index 处理为 HTML 呈现 欢迎/__manager_slideshow.html.erb (0.1ms) 渲染 布局/应用程序中的welcome/index.html.erb (14.5ms) 完成 在 4392 毫秒内完成 200 次（查看次数：4391.3 毫秒）

于 2015 年 12 月 10 日开始为 10.0.2.2 获取“/assets/jquery.js?body=1” 05:44:20 +0000

于 2015 年 12 月 10 日开始为 10.0.2.2 获取“/assets/jquery_ujs.js?body=1” 05:44:20 +0000

在 10.0.2.2 开始 GET "/assets/application.css?body=1" 2015-12-10 05:44:20 +0000

于 2015 年 12 月 10 日开始为 10.0.2.2 获取“/assets/jquery.purr.js?body=1” 05:44:21 +0000

在 10.0.2.2 开始 GET "/assets/best_in_place.js?body=1" 2015-12-10 05:44:21 +0000

在 10.0.2.2 开始 GET "/assets/jquery.autosize.js?body=1" 2015-12-10 05:44:21 +0000

在 10.0.2.2 开始 GET "/assets/bootstrap/affix.js?body=1" 2015-12-10 05:44:22 +0000

在 10.0.2.2 开始 GET "/assets/bootstrap/alert.js?body=1" 2015-12-10 05:44:22 +0000

在 10.0.2.2 开始 GET "/assets/bootstrap/button.js?body=1" 2015-12-10 05:44:22 +0000

在 10.0.2.2 开始 GET "/assets/bootstrap/collapse.js?body=1" 2015-12-10 05:44:22 +0000

在 10.0.2.2 开始 GET "/assets/bootstrap/carousel.js?body=1" 2015-12-10 05:44:22 +0000

在 2015-12-10 05:44:23 开始为 10.0.2.2 获取“/assets/animate.css” +0000

在 10.0.2.2 开始 GET "/assets/bootstrap/dropdown.js?body=1" 2015-12-10 05:44:23 +0000

在 10.0.2.2 开始 GET "/assets/bootstrap/tab.js?body=1" 2015-12-10 05:44:23 +0000

在 10.0.2.2 开始 GET "/assets/bootstrap/transition.js?body=1" 2015-12-10 05:44:23 +0000

在 10.0.2.2 开始 GET "/assets/bootstrap/scrollspy.js?body=1" 2015-12-10 05:44:23 +0000

在 10.0.2.2 开始 GET "/assets/bootstrap/modal.js?body=1" 2015-12-10 05:44:23 +0000

在 10.0.2.2 开始 GET "/assets/bootstrap/tooltip.js?body=1" 2015-12-10 05:44:24 +0000

在 10.0.2.2 开始 GET "/assets/bootstrap/popover.js?body=1" 2015-12-10 05:44:24 +0000

于 2015 年 12 月 10 日开始为 10.0.2.2 获取“/assets/bootstrap.js?body=1” 05:44:24 +0000

于 2015 年 12 月 10 日开始为 10.0.2.2 获取“/assets/turbolinks.js?body=1” 05:44:24 +0000

开始 GET “/assets/revolution-slider/jquery.themepunch.enablelog.js?body=1” 10.0.2.2 在 2015-12-10 05:44:25 +0000

开始 GET “/assets/revolution-slider/jquery.themepunch.revolution.js?body=1”为 10.0.2.2 在 2015-12-10 05:44:25 +0000

开始 GET “/assets/revolution-slider/jquery.themepunch.revolution.min.js?body=1” 10.0.2.2 在 2015-12-10 05:44:25 +0000

开始 GET "/assets/revolution-slider/index.js?body=1" for 10.0.2.2 在 2015-12-10 05:44:25 +0000

开始 GET "/assets/isotope/isotope.pkgd.js?body=1" for 10.0.2.2 at 2015-12-10 05:44:26 +0000

在 10.0.2.2 开始 GET "/assets/magnific-popup.js?body=1" 2015-12-10 05:44:26 +0000

在 10.0.2.2 开始 GET "/assets/SmoothScroll.js?body=1" 2015-12-10 05:44:26 +0000

于 2015 年 12 月 10 日开始为 10.0.2.2 获取“/assets/modernizr.js?body=1” 05:44:27 +0000

在 10.0.2.2 开始 GET "/assets/jquery.validate.js?body=1" 2015-12-10 05:44:27 +0000

开始 GET "/assets/jquery.parallax-1.1.3.js?body=1" for 10.0.2.2 at 2015-12-10 05:44:27 +0000

于 2015 年 12 月 10 日开始为 10.0.2.2 获取“/assets/jquery.min.js?body=1” 05:44:28 +0000

在 10.0.2.2 开始 GET "/assets/jquery.knob.min.js?body=1" 2015-12-10 05:44:28 +0000

在 10.0.2.2 开始 GET "/assets/jquery.countTo.js?body=1" 2015-12-10 05:44:28 +0000

在 10.0.2.2 开始 GET "/assets/jquery.browser.js?body=1" 2015-12-10 05:44:28 +0000

在 10.0.2.2 开始 GET "/assets/owl.carousel.js?body=1" 2015-12-10 05:44:29 +0000

于 2015 年 12 月 10 日开始为 10.0.2.2 获取“/assets/custom.js?body=1” 05:44:29 +0000

开始 GET "/assets/coming.soon.config.js?body=1" for 10.0.2.2 at 2015-12-10 05:44:29 +0000

在 10.0.2.2 开始 GET "/assets/google.map.config.js?body=1" 2015-12-10 05:44:29 +0000

在 10.0.2.2 开始 GET "/assets/js/bootstrap.min.js?body=1" 2015-12-10 05:44:29 +0000

于 2015 年 12 月 10 日开始为 10.0.2.2 获取“/assets/js/npm.js?body=1” 05:44:30 +0000

开始 GET "/assets/bootstrap-notify/bootstrap-notify.min.js?body=1" 10.0.2.2 在 2015-12-10 05:44:30 +0000

在 10.0.2.2 开始 GET "/assets/js/bootstrap.js?body=1" 2015-12-10 05:44:30 +0000

于 2015 年 12 月 10 日开始为 10.0.2.2 获取“/assets/template.js?body=1” 05:44:30 +0000

开始 GET "/assets/bootstrap-notify/bootstrap-notify.js?body=1" for 10.0.2.2 在 2015-12-10 05:44:31 +0000

在 10.0.2.2 开始 GET "/assets/charts/Chart.js?body=1" 2015-12-10 05:44:31 +0000

在 10.0.2.2 开始 GET "/assets/charts/Chart.min.js?body=1" 2015-12-10 05:44:31 +0000

开始 GET "/assets/isotope/isotope.pkgd.min.js?body=1" for 10.0.2.2 在 2015-12-10 05:44:31 +0000

开始 GET "/assets/jasny-bootstrap/js/jasny-bootstrap.js?body=1" for 10.0.2.2 在 2015-12-10 05:44:31 +0000

开始 GET "/assets/jasny-bootstrap/js/jasny-bootstrap.min.js?body=1" 10.0.2.2 在 2015-12-10 05:44:32 +0000

开始 GET "/assets/jquery.countdown/jquery.countdown.js?body=1" for 10.0.2.2 2015-12-10 05:44:32 +0000

开始 GET "/assets/jquery.countdown/jquery.countdown.min.js?body=1" 10.0.2.2 在 2015-12-10 05:44:33 +0000

开始 GET "/assets/jquery.countdown/jquery.plugin.js?body=1" for 10.0.2.2 2015-12-10 05:44:33 +0000

开始 GET "/assets/jquery.countdown/jquery.plugin.min.js?body=1" for 10.0.2.2 2015-12-10 05:44:33 +0000

开始 GET "/assets/magnific-popup/jquery.magnific-popup.js?body=1" 10.0.2.2 在 2015-12-10 05:44:33 +0000

开始 GET “/assets/magnific-popup/jquery.magnific-popup.min.js?body=1” 10.0.2.2 2015-12-10 05:44:33 +0000

在 10.0.2.2 开始 GET "/assets/morphext/morphext.js?body=1" 2015-12-10 05:44:34 +0000

在 10.0.2.2 开始 GET "/assets/morphext/morphext.min.js?body=1" 2015-12-10 05:44:34 +0000

开始 GET "/assets/owl-carousel/owl.carousel.js?body=1" 用于 10.0.2.2 在 2015-12-10 05:44:34 +0000

开始 GET "/assets/owl-carousel/owl.carousel.min.js?body=1" for 10.0.2.2 在 2015-12-10 05:44:34 +0000

在 10.0.2.2 开始 GET "/assets/pace/pace.min.js?body=1" 2015-12-10 05:44:34 +0000

开始 GET “/assets/rs-plugin/js/jquery.themepunch.enablelog.js?body=1” 10.0.2.2 在 2015-12-10 05:44:34 +0000

开始 GET “/assets/rs-plugin/js/jquery.themepunch.revolution.js?body=1”对于 10.0.2.2 2015-12-10 05:44:35 +0000

开始 GET “/assets/rs-plugin/js/jquery.themepunch.revolution.min.js?body=1”为 10.0.2.2 2015-12-10 05:44:35 +0000

在 10.0.2.2 开始 GET "/assets/vide/jquery.vide.js?body=1" 2015-12-10 05:44:35 +0000

在 10.0.2.2 开始 GET "/assets/vide/jquery.vide.min.js?body=1" 2015-12-10 05:44:35 +0000

开始 GET "/assets/waypoints/jquery.waypoints.js?body=1" for 10.0.2.2 2015-12-10 05:44:35 +0000

开始 GET "/assets/waypoints/jquery.waypoints.min.js?body=1" for 10.0.2.2 2015-12-10 05:44:36 +0000

于 2015 年 12 月 10 日开始为 10.0.2.2 获取“/assets/application.js?body=1” 05:44:36 +0000

在 10.0.2.2 开始 GET "/assets/rails.validations.js?body=1" 2015-12-10 05:44:36 +0000

于 2015 年 12 月 10 日开始为 10.0.2.2 获取“/assets/jquery_ujs.js?body=1” 05:44:37 +0000

于 2015 年 12 月 10 日开始为 10.0.2.2 获取“/assets/jquery.purr.js?body=1” 05:44:37 +0000

在 10.0.2.2 开始 GET "/assets/jquery.autosize.js?body=1" 2015-12-10 05:44:37 +0000

在 10.0.2.2 开始 GET "/assets/best_in_place.js?body=1" 2015-12-10 05:44:37 +0000

在 10.0.2.2 开始 GET "/assets/bootstrap/affix.js?body=1" 2015-12-10 05:44:37 +0000

在 10.0.2.2 开始 GET "/assets/bootstrap/alert.js?body=1" 2015-12-10 05:44:37 +0000

在 10.0.2.2 开始 GET "/assets/bootstrap/button.js?body=1" 2015-12-10 05:44:38 +0000

在 10.0.2.2 开始 GET "/assets/bootstrap/carousel.js?body=1" 2015-12-10 05:44:38 +0000

在 10.0.2.2 开始 GET "/assets/bootstrap/collapse.js?body=1" 2015-12-10 05:44:38 +0000

在 10.0.2.2 开始 GET "/assets/bootstrap/dropdown.js?body=1" 2015-12-10 05:44:38 +0000

在 10.0.2.2 开始 GET "/assets/bootstrap/tab.js?body=1" 2015-12-10 05:44:38 +0000

在 10.0.2.2 开始 GET "/assets/bootstrap/transition.js?body=1" 2015-12-10 05:44:38 +0000

在 10.0.2.2 开始 GET "/assets/bootstrap/scrollspy.js?body=1" 2015-12-10 05:44:39 +0000

在 10.0.2.2 开始 GET "/assets/bootstrap/modal.js?body=1" 2015-12-10 05:44:39 +0000

在 10.0.2.2 开始 GET "/assets/bootstrap/tooltip.js?body=1" 2015-12-10 05:44:39 +0000

在 10.0.2.2 开始 GET "/assets/bootstrap/popover.js?body=1" 2015-12-10 05:44:39 +0000

于 2015 年 12 月 10 日开始为 10.0.2.2 获取“/assets/bootstrap.js?body=1” 05:44:39 +0000

于 2015 年 12 月 10 日开始为 10.0.2.2 获取“/assets/turbolinks.js?body=1” 05:44:40 +0000

开始 GET “/assets/revolution-slider/jquery.themepunch.enablelog.js?body=1” 10.0.2.2 2015-12-10 05:44:40 +0000

开始 GET “/assets/revolution-slider/jquery.themepunch.revolution.js?body=1”为 10.0.2.2 2015-12-10 05:44:40 +0000

开始 GET “/assets/revolution-slider/jquery.themepunch.revolution.min.js?body=1” 10.0.2.2 在 2015-12-10 05:44:40 +0000

开始 GET "/assets/revolution-slider/index.js?body=1" for 10.0.2.2 在 2015-12-10 05:44:41 +0000

开始 GET "/assets/isotope/isotope.pkgd.js?body=1" for 10.0.2.2 at 2015-12-10 05:44:41 +0000

在 10.0.2.2 开始 GET "/assets/magnific-popup.js?body=1" 2015-12-10 05:44:41 +0000

在 10.0.2.2 开始 GET "/assets/SmoothScroll.js?body=1" 2015-12-10 05:44:41 +0000

于 2015 年 12 月 10 日开始为 10.0.2.2 获取“/assets/modernizr.js?body=1” 05:44:41 +0000

在 10.0.2.2 开始 GET "/assets/jquery.validate.js?body=1" 2015-12-10 05:44:42 +0000

开始 GET "/assets/jquery.parallax-1.1.3.js?body=1" for 10.0.2.2 at 2015-12-10 05:44:42 +0000

于 2015 年 12 月 10 日开始为 10.0.2.2 获取“/assets/jquery.min.js?body=1” 05:44:42 +0000

在 10.0.2.2 开始 GET "/assets/jquery.knob.min.js?body=1" 2015-12-10 05:44:42 +0000

在 10.0.2.2 开始 GET "/assets/jquery.countTo.js?body=1" 2015-12-10 05:44:42 +0000

在 10.0.2.2 开始 GET "/assets/jquery.browser.js?body=1" 2015-12-10 05:44:43 +0000

在 10.0.2.2 开始 GET "/assets/owl.carousel.js?body=1" 2015-12-10 05:44:43 +0000

于 2015 年 12 月 10 日开始为 10.0.2.2 获取“/assets/custom.js?body=1” 05:44:43 +0000

开始 GET "/assets/coming.soon.config.js?body=1" for 10.0.2.2 at 2015-12-10 05:44:43 +0000

在 10.0.2.2 开始 GET "/assets/google.map.config.js?body=1" 2015-12-10 05:44:43 +0000

在 10.0.2.2 开始 GET "/assets/js/bootstrap.min.js?body=1" 2015-12-10 05:44:43 +0000

于 2015 年 12 月 10 日开始为 10.0.2.2 获取“/assets/js/npm.js?body=1” 05:44:44 +0000

开始 GET "/assets/bootstrap-notify/bootstrap-notify.min.js?body=1" 对于 10.0.2.2 在 2015-12-10 05:44:44 +0000

在 10.0.2.2 开始 GET "/assets/js/bootstrap.js?body=1" 2015-12-10 05:44:44 +0000

于 2015 年 12 月 10 日开始为 10.0.2.2 获取“/assets/template.js?body=1” 05:44:44 +0000

开始 GET "/assets/bootstrap-notify/bootstrap-notify.js?body=1" for 10.0.2.2 在 2015-12-10 05:44:44 +0000

在 10.0.2.2 开始 GET "/assets/charts/Chart.js?body=1" 2015-12-10 05:44:45 +0000

在 10.0.2.2 开始 GET "/assets/charts/Chart.min.js?body=1" 2015-12-10 05:44:45 +0000

开始 GET "/assets/isotope/isotope.pkgd.min.js?body=1" for 10.0.2.2 在 2015-12-10 05:44:45 +0000

开始 GET "/assets/jasny-bootstrap/js/jasny-bootstrap.js?body=1" for 10.0.2.2 在 2015-12-10 05:44:45 +0000

开始 GET "/assets/jasny-bootstrap/js/jasny-bootstrap.min.js?body=1" 对于 10.0.2.2 在 2015-12-10 05:44:45 +0000

开始 GET "/assets/jquery.countdown/jquery.countdown.js?body=1" for 10.0.2.2 2015-12-10 05:44:46 +0000

开始 GET "/assets/jquery.countdown/jquery.countdown.min.js?body=1" 10.0.2.2 在 2015-12-10 05:44:46 +0000

开始 GET "/assets/jquery.countdown/jquery.plugin.js?body=1" for 10.0.2.2 2015-12-10 05:44:46 +0000

开始 GET "/assets/jquery.countdown/jquery.plugin.min.js?body=1" for 10.0.2.2 2015-12-10 05:44:46 +0000

开始 GET "/assets/magnific-popup/jquery.magnific-popup.js?body=1" 10.0.2.2 在 2015-12-10 05:44:46 +0000

开始 GET “/assets/magnific-popup/jquery.magnific-popup.min.js?body=1” 10.0.2.2 2015-12-10 05:44:46 +0000

在 10.0.2.2 开始 GET "/assets/morphext/morphext.js?body=1" 2015-12-10 05:44:47 +0000

在 10.0.2.2 开始 GET "/assets/morphext/morphext.min.js?body=1" 2015-12-10 05:44:47 +0000

开始 GET "/assets/owl-carousel/owl.carousel.js?body=1" 用于 10.0.2.2 在 2015-12-10 05:44:47 +0000

开始 GET "/assets/owl-carousel/owl.carousel.min.js?body=1" for 10.0.2.2 2015-12-10 05:44:47 +0000

在 10.0.2.2 开始 GET "/assets/pace/pace.min.js?body=1" 2015-12-10 05:44:47 +0000

开始 GET “/assets/rs-plugin/js/jquery.themepunch.enablelog.js?body=1” 10.0.2.2 2015-12-10 05:44:47 +0000

开始 GET “/assets/rs-plugin/js/jquery.themepunch.revolution.js?body=1”对于 10.0.2.2 2015-12-10 05:44:48 +0000

开始 GET “/assets/rs-plugin/js/jquery.themepunch.revolution.min.js?body=1”为 10.0.2.2 2015-12-10 05:44:48 +0000

在 10.0.2.2 开始 GET "/assets/vide/jquery.vide.js?body=1" 2015-12-10 05:44:48 +0000

在 10.0.2.2 开始 GET "/assets/vide/jquery.vide.min.js?body=1" 2015-12-10 05:44:48 +0000

开始 GET "/assets/waypoints/jquery.waypoints.js?body=1" for 10.0.2.2 2015-12-10 05:44:48 +0000

开始 GET "/assets/waypoints/jquery.waypoints.min.js?body=1" for 10.0.2.2 2015-12-10 05:44:49 +0000

于 2015 年 12 月 10 日开始为 10.0.2.2 获取“/assets/application.js?body=1” 05:44:49 +0000

在 10.0.2.2 开始 GET "/assets/rails.validations.js?body=1" 2015-12-10 05:44:49 +0000

开始 GET "/assets/fontawesome-webfont.woff2?v=4.5.0" for 10.0.2.2 在 2015-12-10 05:44:49 +0000

所以从我看到的一切都加载没有错误。我还注意到任何具有运行一些 javascript 的类的对象，例如

<div class="pv-30 ph-20 feature-box bordered shadow text-center object-non-visible" data-animation-effect="fadeInLeftSmall" data-effect-delay="100">

永远不要加载，因为“对象不可见”它永远不会变得可见，这让我进一步认为某些 js 没有加载或正常工作。

Answer 1

这个问题可能是由于turbolinks，它默认包含在所有 Rails 4 应用程序中。 Turbolinks 非常适合加载时间，但由于它覆盖了正常的页面加载过程，因此不能依赖 jQuery.ready() 或 $(document).on('ready', ... 来执行代码 (link)。

如果您能够修改 javascript 以使用 page:change 事件而不是应该有效的 ready，或者如果您只想删除 turbolinks，您可以通过添加 @987654330 将其从特定链接中删除@ 到锚元素，或将其完全删除 like so。

您也可以尝试查看jquery.turbolinks gem，旨在解决此问题。