Question

我正在开发Ruby on Rails应用程序，我想使用名为gentelella的仪表板。这一个https://github.com/puikinsh/gentelella 该模板完全以简单的HTML格式工作。但是，当我将所有内容传输到我的Rails应用程序时，它变得没有交互性。我的意思是我无法点击侧边栏菜单项。问题出在其custom.js文件中。它将侧边栏菜单分配给变量，如此

$SIDEBAR_MENU = $('#sidebar-menu')

然后像这样附加一个'click'事件：

$SIDEBAR_MENU.find('a').on('click', function(ev) {

     console.log('clicked - sidebar_menu');
}

问题是，如果我保持原样（在我的Rails应用程序中），它永远不会被'clicked - sidebar_menu'控制台消息，因此菜单根本不起作用。但是，如果我在之前放置日志跟踪：

  console.log($SIDEBAR_MENU);   
  $SIDEBAR_MENU.find('a').on('click', function(ev)

我在输出中得到了这个

jQuery.fn.init {context：document，selector：“＃sidebar-menu”} 上下文：文献选择： “＃侧边栏菜单” 的原：对象（0）

所以我确定它实际上被分配给一个变量绝对不是空的

然后我用$（'＃sidebar-menu'）替换所有$ SIDEBAR_MENU出现次数得到这个

$('#sidebar-menu').find('a').on('click', function(ev) {
    alert('it works now!');
}

它开始工作得很好。它已经让我大吃一惊我找不到任何合理的解释。请问任何人解释为什么会发生这种情况？

P.S。我正在使用Rails 5.0.2和jQuery v1.12.4（来自Gems）对不起，如果这样的话题已经存在，我已经搜索了答案，但找不到它

以下是application.js

的内容

  //= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require fastclick
//= require nprogress
//= require Chart.min
//= require gauge.min
//= require bootstrap/bootstrap-progressbar
//= require icheck.min
//= require skycons
//= require jquery.flot
//= require jquery.flot.pie
//= require jquery.flot.time
//= require jquery.flot.stack
//= require jquery.flot.resize
//= require jquery.flot.orderBars
//= require jquery.flot.spline.min
//= require curvedLines
//= require date-ru-RU
//= require jquery.vmap.min
//= require jquery.vmap.world
//= require jquery.vmap.sampledata
//= require moment.min
//= require bootstrap/daterangepicker
//= require custom

Answer 1

我刚刚发现这种奇怪行为的原因是什么。在详细了解Gentelella的源代码后，我注意到所有脚本标记都位于页面底部。所以我已经改变了我的Rails模板页面的方式，它也包括它们在正文

之后

<!DOCTYPE html>
<html>
  <head>
    <title>No Matter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1, user-scalable=no">
    <%= csrf_meta_tags %>

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

  </head>

  <body class="nav-md"> 
    <%= yield %>
  </body>
   <%= javascript_include_tag 'dashboard', 'data-turbolinks-track': 'reload' %>
</html>

现在一切正常。我不知道为什么会发生这种情况，因为在Gentelella的“custom.js”中有一个$（document）.ready（）回调函数初始化所有内容，整个菜单从一开始就存在，没有动态加载。如果有人能解释原因，我将不胜感激，因为我自己就是网络开发的新手

无法将jQuery结果分配给变量

1 个答案: