Ruby on Rails - jQuery 事件无法正常工作答案

【问题标题】：Ruby on Rails - jQuery events not working properlyRuby on Rails - jQuery 事件无法正常工作
【发布时间】：2017-01-19 18:15:10
【问题描述】：

我正在将一个前端项目迁移到 Rails。我有两条路线，/home 和 /home/new。 /home 视图有一个指向 /home/new 视图的链接。如果我手动输入地址栏上的路线，一切都会完美呈现。如果我通过 /home 视图上的链接进入视图，则 jQuery 事件无法正常运行，从而导致依赖于它们的样式无法正常工作。控制台中没有错误。谁能帮帮我？

github 仓库链接：https://github.com/rimildeyjsr/sms-scheduler

这就是样式的渲染方式：

这是我们如何通过链接访问它时呈现的：

application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>SmsScheduler</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

    <%= stylesheet_link_tag "https://fonts.googleapis.com/icon?family=Material+Icons" %>
    <%= stylesheet_link_tag "https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en" %>
    <%= stylesheet_link_tag "https://fonts.googleapis.com/css?family=Roboto+Mono" %>


  </head>

  <body>
    <%= yield %>
  </body>
</html>

assets.rb：

# Be sure to restart your server when you modify this file.

# Version of your assets, change this if you want to expire all your assets.
Rails.application.config.assets.version = '1.0'
Rails.application.config.assets.precompile += %w( mdDateTimePicker.css )
Rails.application.config.assets.precompile += %w( style.css )
Rails.application.config.assets.precompile += %w( mdDateTimePicker.js )
Rails.application.config.assets.precompile += %w( app.js )
Rails.application.config.assets.precompile += %w( home.style.css )
# Add additional assets to the asset load path
# Rails.application.config.assets.paths << Emoji.images_path

# Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
# Rails.application.config.assets.precompile += %w( search.js )

应用程序.css

/*
 * 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 any plugin's vendor/assets/stylesheets directory 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 bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require jquery-ui
 *= require material
 *= require mdDateTimePicker
 *= require_tree .
 *= require_self
 */

应用程序.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. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require material
//= require moment
//= require draggabilly.pkgd
//= require mdDateTimePicker
//= require turbolinks
//= require_tree .

routes.rb:

Rails.application.routes.draw do
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
  get '/home', to: 'home#index'
  get '/home/new', to: 'home#new'
end

app.js

ready = function(){
    $('.mdl-card__supporting-text').hide();
    var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
    $('#fab').click(function(){

        var innerHtml = $('#fab .material-icons').html();
        if (innerHtml === 'add'){
            console.log(2);
            $('#fab').css('background-color','green');
            $('#fab .material-icons').html('check circle');
            $('.mdl-card__supporting-text').show();
            $('.mdl-card__title').hide();
        }

        else {
            $('.mdl-card__supporting-text').hide();
            $('#fab').css('background-color','#ed2553');
            $('#fab .material-icons').html('add');
            $('.mdl-card__title').show();
            $('#title-text').text('Campaign added!');
        }

    });

    $('#sms-msg').keyup(function(){
        var Length = $('#sms-msg').val().length;
        var pageBreak = Math.floor((Length/160));
        $('#break-msg').val(pageBreak+1);
    });

    var inputStartDate = document.querySelector('#start-date');
    var outputStartDate = document.querySelector('#start-date-label');

    var inputEndDate = document.querySelector('#end-date');
    var outputEndDate = document.querySelector('#end-date-label');

    var inputStartTime = document.querySelector('#start-time');
    var outputStartTime = document.querySelector('#start-time-label');


    var dialogStartDate = new mdDateTimePicker.default({
        type: 'date',
        orientation: 'PORTRAIT',
        past: moment().subtract(150,'years'),
        future: moment().add(50,'years')
    });

    dialogStartDate.trigger = inputStartDate;

    if (inputStartDate) {
        inputStartDate.addEventListener('click', function() {
            dialogStartDate.toggle();
            $('.container-div').toggle();
        });

        inputStartDate.addEventListener('onOk', function() {
            var startDate = dialogStartDate.time.toString();
            var startDateFormat = moment(startDate).format('LL');
            outputStartDate.innerHTML = startDateFormat;
            $('#start-date-label').css('color','blue');
            $('.container-div').show();
        });

        inputStartDate.addEventListener('onCancel',function(){
            $('.container-div').show();
        });
    }




    var dialogEndDate = new mdDateTimePicker.default({
        type: 'date',
        orientation: 'PORTRAIT',
        past: moment().subtract(150,'years'),
        future: moment().add(150,'years')
    });

    dialogEndDate.trigger = inputEndDate;

    if (inputEndDate) {
        inputEndDate.addEventListener('click', function() {
            dialogEndDate.toggle();
            $('.container-div').toggle();
        });

        inputEndDate.addEventListener('onOk', function() {
            var endDate = dialogEndDate.time.toString();
            var endDateFormat = moment(endDate).format('LL');
            outputEndDate.innerHTML = endDateFormat;
            $('#end-date-label').css('color','blue');
            $('.container-div').show();
        });

        inputEndDate.addEventListener('onCancel',function(){
            $('.container-div').show();
        });
    }



    var dialogStartTime = new mdDateTimePicker.default({
        type: 'time',
        orientation: 'PORTRAIT',
    });

    dialogStartTime.trigger = inputStartTime;

    if (inputStartTime) {
        inputStartTime.addEventListener('click', function() {
            dialogStartTime.toggle();
            $('.container-div').toggle();
        });

        inputStartTime.addEventListener('onOk', function() {
            $('.container-div').show();
            var startTime = dialogStartTime.time.toString();
            var startTimeFormat = moment(startTime).format('LTS');
            outputStartTime.innerHTML = startTimeFormat;
            $('#start-time-label').css('color','blue');
        });

        inputStartTime.addEventListener('onCancel',function(){
            $('.container-div').show();
        });
    }



}

$(document).ready(ready);
$(document).on("page:change", ready);

【问题讨论】：

你在使用 Rails 5 吗？
对于 Rails 5 (turbolinks 5)，使用 $(document).on("turbolinks:load", ready); 而不是 $(document).on("page:change", ready);。
现在有些样式正在渲染，有些还没有:(
@31piy - 正是我在我的表单中来自 Material Design lite 的浮动标签不起作用。

标签： jquery css ruby-on-rails

【解决方案1】：

您的 mdDateTimePicker 文件/丢失/未加载的文件是否位于您的项目目录中？它不包含在 github 存储库中。

【讨论】：

我已将其添加到相应 javascript 和样式表文件夹中的供应商/资产中
脚本都在完美加载
你能从其中一个脚本成功调用控制台中的函数吗？这似乎是一个涡轮链接问题，tbh。

【解决方案2】：

事实证明，从项目中删除 turbolinks，完全解决了问题！

从 Gemfile 中删除 gem 'turbolinks', '~> 5'。

从您的 application.js 中删除 //= 需要 turbolinks

Application.html.erb

<%= stylesheet_link_tag    'application', media: 'all' %>
<%= javascript_include_tag 'application', %>

【讨论】：