Jquery 适用于控制台但不适用于 Rails 4 application.js 文件答案

【问题标题】：Jquery works in console but not Rails 4 application.js fileJquery 适用于控制台但不适用于 Rails 4 application.js 文件
【发布时间】：2014-12-03 19:18:13
【问题描述】：

这是我的 html 标记：（在 Welcome/index.html.erb 中）在 Rails 4 项目中。

<div class="bottom-bottom-box box">
<div class="miv-box">
  <span class="five-yr thin-text">5-year</span></br>
  <span class="avg-return thin-text">Average Return</span>
</div>
  <span class="percent bold-text">19%+</span>
</div>

这是我的 jquery：（在welcome.js 中）（我不知道coffeescript，所以我只是将预制文件重命名为.js 而不是.js.coffee）

$(".bottom-bottom-box").on('click', function() {
  alert('test');
  var el = $(this);
  if (el.text() == el.data("text-swap")) {
   el.text(el.data("text-original"));
  } else {
   el.data("text-original", el.text());
   el.text(el.data("text-swap"));
 }
});

我执行警报（'test'）的点击功能甚至不起作用，奇怪的部分是当我在控制台中键入完全相同的行时它起作用。

$(".bottom-bottom-box").on('click', function() { alert('test') });

不确定可能出了什么问题，但如果有人在此之前遇到过这个问题，请告诉我！谢谢

【问题讨论】：

标签： javascript jquery ruby-on-rails ruby coffeescript

【解决方案1】：

听起来.on() 在.bottom-bottom-box 元素加载到DOM 之前被调用。

这是一种常见的情况，其中包含在 head 中的 Javascript 在加载 body 之前运行。事件处理程序只能附加到 DOM 中存在的元素，这就是您的代码在页面加载时失败（DOM 为空）但在控制台中工作（加载了 DOM）的原因。

您可以通过将您的 JS 包含移动到页面底部来解决此问题，或者告诉 jQuery 在加载 DOM 后运行您的代码，如下所示：

$(document).ready(function() {
  $(".bottom-bottom-box").on('click', function() {
    alert('test');
    var el = $(this);
    if (el.text() == el.data("text-swap")) {
      el.text(el.data("text-original"));
    } else {
      el.data("text-original", el.text());
      el.text(el.data("text-swap"));
    }
  });
});

如果您使用 Turbolinks，请查看此答案：https://stackoverflow.com/a/18770589/1153362

【讨论】：