Javascript Jquery可以在控制台中工作，但不能在Rails 4 application.js文件中工作

这是我在Rails4项目中的html标记：（在welcome/index.html.erb中）

<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>

我的点击报警（“测试”）功能甚至不起作用，奇怪的是当我在控制台中键入与它工作完全相同的行时

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

不确定什么可能是错误的，但如果有人曾经有过这个问题，请让我知道！ thnx

听起来像是在

.bottom box

元素加载到DOM之前调用

.on（）

这是一种常见的情况，头部包含的Javascript在加载主体之前运行。事件处理程序只能附加到DOM中的元素，这就是为什么代码在页面加载（DOM为空）时失败，但在控制台中工作（DOM加载）

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

$(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"));
    }
  });
});

---

如果您使用TurboLink，请查看以下答案：

听起来像是在

元素加载到DOM之前调用
.on（）

这是一种常见的情况，头部包含的Javascript在加载主体之前运行。事件处理程序只能附加到DOM中的元素，这就是为什么代码在页面加载（DOM为空）时失败，但在控制台中工作（DOM加载）

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

$(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"));
    }
  });
});


如果您使用TurboLink，请查看以下答案：