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

我点击功能来做警报（'测试'）甚至不会工作，怪异的部分是当我在控制台中输入完全相同的行时。

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

不知道什么可能是错误的，但如果任何人有这个问题之前请让我知道！ thnx

Answer 1

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

这是一种常见的情况，其中包含在头部的Javascript在身体加载之前运行。事件处理程序只能附加到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