新的Coffeescript文件干擾其他JS

Question

在我的應用程序中，我使用下面的代碼來提供展開/摺疊功能。

在我的.js文件之一：

$(document).ready(function(){ 

    $('.row .bundle').on('click', function(e) { 
     e.preventDefault(); 
     var $this = $(this); 
     var $collapse = $this.closest('.collapse-group').find('.collapse'); 
     $collapse.collapse('toggle'); 
    }); 

}); 

在視圖中，周圍的一切我想擴大：

<div class="row" style="text-align:center"> 
<div class="collapse-group"> 
    <h4 class="normal_links"> 
     <a class="bundle" href='#'>(Expand)</a> 
    </h4><br> 
    <div class="collapse normal_links" > 
    # Code to expand/collapse here 
    </div> 
</div> 
</div> 

工作就像一個魅力，直到我開始使用morris.js庫將一些圖表引入我的應用程序，此時，展開/摺疊（因此EC）功能停止工作在每個頁面上，而不是我的圖表顯示的那個頁面上。當我說EC不起作用時，我的意思是，當我點擊展開鏈接時，它就會跟着它到'＃'。

我morris.js代碼，在該模型的animal.js.coffee文件，該圖表屬於：

jQuery -> 
Morris.Donut 
    element: 'weight_chart' 
    data: [ 
    {label: "Pounds Sold", value: $('#weight_chart').data('sold')} 
    {label: "Pounds Left", value: $('#weight_chart').data('left')} 
    ] 
    colors: ['#0066CC', "#880000"] 

Morris.Donut 
    element: 'sales_chart' 
    data: [ 
    {label: "Revenue Made", value: $('#sales_chart').data('sold')} 
    {label: "Est. Revenue Left", value: $('#sales_chart').data('left')} 
    ] 
    colors: ["#336633", "#880000"] 

Morris.Donut 
    element: 'status_chart' 
    data: [ 
     {label: "Incomplete", value: $('#status_chart').data('zero')} 
     {label: "Downpaid", value: $('#status_chart').data('one')} 
     {label: "Fully Paid", value: $('#status_chart').data('two')} 
     {label: "Received", value: $('#status_chart').data('three')} 
    ] 
    colors: ["#880000", '#E09050', '#989898', '#000000' ] 

的我如何實際調用圖表視圖的一個例子：

<%= content_tag :div, "", id: "sales_chart", 
     data: {sold: @animal.rev.round(2), 
       left: @animal.rev_left.round(2)}, 
     class: "morris_chart" %> 

圖表顯示完美，就像圖表頁面上的EC一樣。在看似每隔一頁，不是。當我用morris代碼（暫時）刪除animal.js.coffee文件時，問題就消失了。我已經三重檢查了我的視圖代碼，並且它都很好（或者至少與正在工作的代碼相同）。

可能還有一個額外的興趣是，當它工作的時候，曾經是一個空的animal.js文件，我用morris相關的代碼替換爲animal.js.coffee文件。實際的morris.js和raphael.js代碼位於vendor/javascripts中。 EC javascript代碼完全位於另一個模型的.js文件中，但到目前爲止還沒有問題。

任何想法？我會離開我的電腦幾個小時，但是當我回來時，我會發布任何人想要的任何附加代碼。

編輯 - 想通我的application.js文件也可能是相關的：

// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD 
// GO AFTER THE REQUIRES BELOW. 
// 
//= require jquery 
//= require jquery_ujs 
//= require bootstrap 
//= require raphael 
//= require morris 
//= require_tree . 

Answer 1

問題似乎是Coffeescript正在尋找沒有出現的網頁上的元素（「sales_chart」等）。當發生這種情況時，事情出錯了，我的其他Javascript都無法工作。爲了解決這個問題，我只需要在調用Morris之前檢查元素。所以：

jQuery -> 

    if $('#weight_chart').length 
     Morris.Donut 
     element: 'weight_chart' 
     data: [ 
      {label: "Pounds Sold", value: $('#weight_chart').data('sold')} 
      {label: "Pounds Left", value: $('#weight_chart').data('left')} 
     ] 
     colors: ['#0066CC', "#880000"] 

    if $('#sales_chart').length 
     Morris.Donut 
     element: 'sales_chart' 
     data: [ 
      {label: "Revenue Made", value: $('#sales_chart').data('sold')} 
      {label: "Est. Revenue Left", value: $('#sales_chart').data('left')} 
     ] 
     colors: ["#336633", "#880000"] 

    if $('#status_chart').length 
     Morris.Donut 
     element: 'status_chart' 
     data: [ 
      {label: "Incomplete", value: $('#status_chart').data('zero')} 
      {label: "Downpaid", value: $('#status_chart').data('one')} 
      {label: "Fully Paid", value: $('#status_chart').data('two')} 
      {label: "Received", value: $('#status_chart').data('three')} 
     ] 
     colors: ["#880000", '#E09050', '#989898', '#000000'] 

問題解決了。感謝您的幫助，並藉此學習Coffeescript！

Answer 2

試着改變你的animal.js.coffee到這一點，這有正確的縮進，將您的莫里斯在函數內部調用你'傳遞給jQuery。

jQuery -> 
    Morris.Donut 
    element: 'weight_chart' 
    data: [ 
     {label: "Pounds Sold", value: $('#weight_chart').data('sold')} 
     {label: "Pounds Left", value: $('#weight_chart').data('left')} 
    ] 
    colors: ['#0066CC', "#880000"] 

    Morris.Donut 
    element: 'sales_chart' 
    data: [ 
     {label: "Revenue Made", value: $('#sales_chart').data('sold')} 
     {label: "Est. Revenue Left", value: $('#sales_chart').data('left')} 
    ] 
    colors: ["#336633", "#880000"] 

    Morris.Donut 
    element: 'status_chart' 
    data: [ 
     {label: "Incomplete", value: $('#status_chart').data('zero')} 
     {label: "Downpaid", value: $('#status_chart').data('one')} 
     {label: "Fully Paid", value: $('#status_chart').data('two')} 
     {label: "Received", value: $('#status_chart').data('three')} 
    ] 
    colors: ["#880000", '#E09050', '#989898', '#000000' ]