Question

我最近在我的个人网站上实现了一堆jQuery行为，并且还将所有JS都移到了特定于页面的JS文件中（之前，我已经将所有JS放在脚本标签内每个页面的底部。）。在本地一切正常，但是当我将网站推送到现场时，几乎所有的jQuery动画都停止工作。它们主要是滑入式，滑入式等，在每个元素在滚动上进行动画制作之前，我先将其放置在屏幕外，所以现在该网站看起来空白。

我知道这个问题已经被问过多次了，但是以前的答案都没有解决我的问题。我尝试了require rails_ujs，jquery，jquery_ujs等的多种组合，但是没有运气。我当前收到参考错误：$在控制台中未定义（该搜索中的S / O答案也没有运气）。

有什么想法吗？

这是网站链接以及application.js文件，自定义JS文件和HTML头。

www.justincefai.co

application.js文件

//= require turbolinks
//= require_tree .
//= require jquery
//= require jquery_ujs
//= require popper
//= require bootstrap-sprockets

自定义JS文件


$(document).ready(function() {
  var $horizontal = $(".about-left");

  $(window).scroll(function() {
    var s = $(this).scrollTop(),
      d = $(document).height(),
      c = $(this).height();

    scrollPercent = (s / (d - c)) * 6;

    var position = scrollPercent * ($(document).width() - $horizontal.width());

    $horizontal.css({
      right: "calc(82% - 150px + " + position + "px)"
    });
  });
});

$(document).ready(function() {
  var $horizontalR = $(".about-right");
  var $title = $(".about-top");

  $(window).scroll(function() {
    var s = $(this).scrollTop(),
      d = $(document).height(),
      c = $(this).height();

    scrollPercent = (s / (d - c)) * 6;

    var position = scrollPercent * ($(document).width() - $horizontalR.width());

    $horizontalR.css({
      left: "calc(82% - 150px + " + position + "px)"
    });
  });
});

application.html.erb头标记

<head>
        <%= favicon_link_tag asset_path('favicon.png'), :rel => 'icon', :type =>  'image/png' %>
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <%= csrf_meta_tags %>
        <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
        <link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
        <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
        <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.9"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

        <title>Justin Cefai</title>
        <meta name="description" content="Justin Cefai is a software engineer specializing in full-stack development.  He has experience with Ruby, Rails, JavaScript, and building web applications.">

    </head>

Answer 1

尝试一下：

document.addEventListener("turbolinks:load", function() {
...
})

jQuery仅在Rails网站上本地工作

1 个答案: