个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 04:30:33 25 4
gpt4 key购买 nike

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

github 存储库链接:https://github.com/rimildeyjsr/sms-scheduler

这是样式应该如何呈现:

enter image description here

这就是当通过链接访问时它是如何呈现的:

enter image description here

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 .

路线.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

应用程序.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);

最佳答案

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

关于jquery - Ruby on Rails - jQuery 事件无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41748894/

25 4 0
文章推荐： css - 如何在 Bootstrap 中将 "well"和 "button"混合在一起
文章推荐： c++ - QML Button onClicked函数执行顺序
文章推荐： javascript - 在移动设备上将页面列表动态显示为一行
文章推荐： css - 自动将 md-tab 调整到 Angular2 Materials 中的屏幕或容器宽度
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com