javascript - Jquery 在控制台中有效，但在 Rails 4 application.js 文件中无效

Question

这是我的 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') });

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

Answer 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