jQuery DOM 事件侦听器因“$ 未定义”而失败答案

【问题标题】：jQuery DOM event listener failed with "$ is not defined"jQuery DOM 事件侦听器因“$ 未定义”而失败
【发布时间】：2016-05-16 02:07:09
【问题描述】：

按照here 的建议，我在 Ruby on Rails 应用程序中有以下内联代码：

  document.addEventListener("DOMContentLoaded", function(event) { 
    $("select#graph_line_duration").change(function(){
        $("form").submit();
    });
    $("input#graph_duration").hide();
  });

我收到一个错误$ is not defined。但是，如果我单击链接转到该页面，则代码可以正常工作，因此我的 jquery 资产正在加载，并且有足够的时间。

【问题讨论】：

这个内联脚本之前/之上是否导入了 jQuery？如果不是，那就是原因。
你是如何加载 jQuery 的，它在 HTML 中的加载时间是否比你的脚本更早？
我正在使用 ruby on rails 资产管道和 sprockets 来加载 jQuery。它的加载应该在 html 之前启动。

标签： jquery ruby-on-rails

【解决方案1】：

试试这个：

document.addEventListener("load", function(event) { ... })

https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

DOMContentLoaded 事件在文档完全加载和解析后触发，无需等待样式表、图像和子框架完成加载（加载事件可用于检测完全加载的页面）。

【讨论】：

这个监听器根本没有触发，所以我的jquery代码没有被执行。
你可以尝试在这种情况下window.addEventListener 按照这个链接developer.mozilla.org/en-US/docs/Web/Events/load 尝试将 console.log() 作为第一条语句放在 document.addEventListener 中，看看它是否会触发。

【解决方案2】：

查看您的导入顺序，即：

//= require_self
//= require jquery
//= require jquery_ujs

【讨论】：

我已按照您的指示更改了顺序，但这仍然无济于事。为什么 DOMContentLoaded 的事件监听器会触发，即使 jQuery 尚未加载？

【解决方案3】：

由于网络延迟，您在运行它时可能没有加载 jQuery。

试试这个：

$(document).ready(function() {
    document.addEventListener("DOMContentLoaded", function(event) { 
        $("select#graph_line_duration").change(function(){
            $("form").submit();
        });
        $("input#graph_duration").hide();
    });
});

这会在 jQuery 完全加载后运行 javascript，但必须出现在 HTML 文件中加载 jQuery 的 <script> 标记之后。

【讨论】：

$ 上的 $(document) 仍将未定义：D