Question

这是我在hails 4项目中的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>

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

我在点击功能上进行提醒（＆＃39;测试＆＃39;）甚至无法正常工作，奇怪的部分是当我在控制台中输入完全相同的线路时。

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

不确定可能出现什么问题，但如果有人遇到此问题，请告诉我们！日Thnx

Answer 1

在将.on()元素加载到DOM之前调用.bottom-bottom-box之类的声音。

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

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

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

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

1 个答案: