新手问题 turbolinks 造成 Jquery 不正常怎么办?

syutran · 2018年10月09日 · 最后由 bysxiang 回复于 2018年10月11日 · 1466 次阅读

Rails 5 使用 application.js

做了一个 NAV 的边栏采单

//= require rails-ujs                                                                                                                  
//= require jquery3                                                                                                         
//= require popper                                                                                                    
//= require bootstrap-sprockets             
//= require activestorage                                                                                                      
//= require turbolinks                                                                                                           
//= require_tree .                                                                                                            

$(document).ready(function() {                                                                                      
  jQuery(function ($) {                                                                                              
    $(".sidebar-dropdown > a").click(function() {                                                             
      $(".sidebar-submenu").slideUp(200);                                                                       
      if ($(this).parent().hasClass("active")){                                                                 
        $(".sidebar-dropdown").removeClass("active");                                                      
        $(this).parent().removeClass("active");                                                         
      } else {                                                                                                               
        $(".sidebar-dropdown").removeClass("active");                                                           
        $(this).next(".sidebar-submenu").slideDown(200);                                                        
        $(this).parent().addClass("active");                                                                          
      }                                                                                                                             
    });                                                                                                                         

    $("#close-sidebar").click(function() {                                                                           
      $(".page-wrapper").removeClass("toggled");                                                            
    });                                                                                                                          
    $("#show-sidebar").click(function() {                                                                     
      $(".page-wrapper").addClass("toggled");                                                           
    });                                                                                                                 
  });                                                                                                                      
})                                                                                                                  

如果加入 turbolinks 就无效(菜单里的下拉)是什么原因?

if ($(this).parent().hasClass("active")){                                                                 
        $(".sidebar-dropdown").removeClass("active");  这行不执行                                                    
        $(this).parent().removeClass("active");               这行也不执行                                          
      } else {                                                                                                               
        $(".sidebar-dropdown").removeClass("active");                                                           
        $(this).next(".sidebar-submenu").slideDown(200);                                                        
        $(this).parent().addClass("active");                                                                          
      }                  

把第一行改为:

$(document).on('turbolinks:load', function() {

也是没效果(drop-down)。

去掉 turbolinks

去掉 turbolinks

或者加上 Stimulus

去掉 turbolinks 有点不舍得,页面有被刷的感觉不爽吧?

$(document).ready(function() {                                                                                      
  jQuery(function ($) {

这里两层 document load 有问题,导致外层改了时间里面还是在等 DOMContentLoaded

外层改成 $(document).on('turbolinks:load', function() { 再把里层 jQuery(function ($) { 去掉。

另外全局绑定事件不是好实践,有时间的建议看 Stimulus,和 Turbolinks 绝配。

边栏采单就是全局的哦~

我更正一下,6 楼意思是依赖 turbolinks:load 绑定事件不是好实践。边栏可能大部分情况需要每次载入都执行,但到了没有边栏的页面就是无谓的消耗了。如果习惯这种写法的话,个别页面的事件也这样绑,那么挂在 turbolinks:load 上面的逻辑就会越来越多,并且很多是不必要执行的。

舍 turbolinks 而得 jQuery 也

你就不该用 rails 的前端的任何解决方案😂

需要 登录 后方可回复, 如果你还没有账号请 注册新账号