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