JavaScript 在 Rails 5 应用程序中不起作用

Posted 2023-05-09

【中文标题】JavaScript 在 Rails 5 应用程序中不起作用

【英文标题】：JavaScript not working in rails 5 app

【发布时间】：2018-06-09 02:06:37

【问题描述】：

我想使用静态 javascript 文件而不使用我的 rails 应用程序中的 gem。我的application.js 看起来像这样

//= require jquery
//= require bootstrap
//= require owl-carousel
//= require rails-ujs

我必须在 javascript 文件夹中添加所有 Js 文件，而无需使用资产管道使用任何 gem。 The final output that i want。但在我的 Rails 应用程序 javascript is not working or not loading 中。我的application.css.scss 看起来像这样：

@import "bootstrap";
@import "style";
@import "owl-carousel";

还有index.html.erb的代码

<div class="app_screenshots_slides owl-carousel">
    <div class="single-shot">
        <%=image_tag("scr-img/1.png", alt: "")%>
    </div>
    <div class="single-shot">
        <%=image_tag("scr-img/2.png", alt: "")%>
    </div>
    <div class="single-shot">
        <%=image_tag("scr-img/3.png", alt: "")%>
    </div>
    <div class="single-shot">
        <%=image_tag("scr-img/4.png", alt: "")%>
    </div>
    <div class="single-shot">
        <%=image_tag("scr-img/1.png", alt: "")%>
    </div>
    <div class="single-shot">
        <%=image_tag("scr-img/3.png", alt: "")%>
    </div>
</div>

【问题讨论】：

javascript 无法加载。所以检查控制台是否有错误。然后设置一个断点，因为您没有包含有关此问题的代码

你的application.html.erb 是否包含 javascript_include_tag 'application'

是的，我已经包含了这个

这里是我的 Github repo 和 issue github.com/asdimalix/javascript-test/issues/1的链接

【参考方案1】：

您的所有 javascript 都已实际加载，但问题是您没有初始化 owl carousel 插件。只需添加

$(document).ready(function () 
    $(".owl-carousel").owlCarousel();
);

在您的home/index.html.erb 的底部或相关的 js 文件中以使其工作。

编辑 - 修复您当前的设置 问题是您的插件在加载实际 html 之前已初始化。可能的修复是1.change

    (function ($) 
    'use strict';


// :: 1.0 Owl Carousel Active Code
    if ($.fn.owlCarousel) 
        $(".welcome_slides").owlCarousel(
            items: 1,
            loop: true,
            autoplay: true,
            smartSpeed: 1500,
            nav: true,
            navText: ["<i class='pe-7s-angle-left'</i>", "<i class='pe-7s-angle-right'</i>"]
        );
        $(".app_screenshots_slides").owlCarousel(
            items: 1,
            loop: true,
            autoplay: true,
            smartSpeed: 800,
            margin: 30,
            center: true,
            dots: true,
            responsive: 
                0: 
                    items: 1
                ,
                480: 
                    items: 3
                ,
                992: 
                    items: 5
                
            
        );
    

)(jQuery)

; 在assets/javascripts/owl-carousel.js 到

    $(document).ready(function () 

    if ($.fn.owlCarousel) 
        $(".welcome_slides").owlCarousel(
            items: 1,
            loop: true,
            autoplay: true,
            smartSpeed: 1500,
            nav: true,
            navText: ["<i class='pe-7s-angle-left'</i>", "<i class='pe-7s-angle-right'</i>"]
        );
        $(".app_screenshots_slides").owlCarousel(
            items: 1,
            loop: true,
            autoplay: true,
            smartSpeed: 800,
            margin: 30,
            center: true,
            dots: true,
            responsive: 
                0: 
                    items: 1
                ,
                480: 
                    items: 3
                ,
                992: 
                    items: 5
                
            
        );
    

);

2. 将javascript_include_tag 中的application.html.erb 移动到页面底部，就在</body> 之前 3. 将 owl carousel 初始化脚本从 owl-carousel.js 移动到您的 home/index.html.erb 希望这会有所帮助。

【讨论】：

我也在我的 owl carousel js 文件的底部初始化...像这样

见这里github.com/asdimalix/javascript-test/blob/master/app/assets/…

不客气，如果你能接受答案，如果它有帮助，那就太好了。@devdap

只需单击左侧投票图标下方的复选标记。 i.stack.imgur.com/uqJeW.png

【参考方案2】：

rails-ujs，在 Rails 5 中引入，不是为了使用 jQuery——它是为了摆脱对 jQuery 的依赖而开发的。

见我的detailed answer