jQuery只在瀏覽器刷新本地Rails項目後才起作用

我有這兩個jQuery函數，如果我刷新瀏覽器窗口，這些函數都可以正常工作......但是，如果我只需點擊該站點，下面的jQuery就不會執行。我沒有收到任何控制檯錯誤。我曾嘗試將其包裝在$(window).on('load', function() { ... }和$(function(){ ... }中。我也嘗試包裝每個單獨像這樣：$(".accordion").on('load', function() { ... }。jQuery只在瀏覽器刷新本地Rails項目後才起作用

任何想法都將不勝感激，因爲這是我在Rails生態系統中的第一個項目。

// grow hover for landing page 
$(window).bind("resize",function(){ 
    console.log($(this).width()); 
    if($(this).width() <1024){ 
     $('div.causeBox').addClass('grow') 
    } 
    else{ 
     $('div.causeBox').removeClass('grow') 
    } 
}) 

// accordion animation 
var acc = document.getElementsByClassName("accordion"); 
var i; 

for (i = 0; i < acc.length; i++) { 
    acc[i].onclick = function() { 
     this.classList.toggle("active"); 
     var panel = this.nextElementSibling; 
     if (panel.style.maxHeight){ 
      panel.style.maxHeight = null; 
     } else { 
      panel.style.maxHeight = panel.scrollHeight + "px"; 
     } 
    } 
}

這是我的jQuery的問題？這是我之前沒有遇到過的關於我的本地環境的奇怪事情嗎？感謝您的任何建議。

來源

2017-09-01 ludditedev

更多關於它是否使用[渦輪鏈接]（https://github.com/turbolinks/turbolinks）？我相信它是默認啓用的，但是自從我開始一個新項目以來已經有一段時間了 –

@SimpleLime我不確定，因爲我是項目的前端開發人員，所以Rails項目本身是由後端開發人員啓動的。有沒有簡單的方法讓我檢查？ – ludditedev

這是一個javascript庫，所以你應該能夠在你的最終看到它的痕跡，看到我對我的回答 –

有可能你的項目使用Turbolinks，您可以通過在的Gemfile尋找turbolinks或檢查應用程序/資產/ JavaScript的檢查此/ application.js中爲//= require turbolinks。什麼Turbolinks所做的是：

當你點擊一個鏈接，Turbolinks自動抓取網頁的內容，掉期及其<body>，併合並其<head>，都不會產生一個完整的頁面加載的成本。

正因爲如此，您只能實際加載一次頁面，然後Turbolinks接管並僞裝頁面。在他們自述的Running JavaScript When a Page Loads部分：

您可以用來響應window.onload，DOMContentLoaded，或jQuery的ready事件JavaScript的安裝行爲。藉助Turbolinks，這些事件只會響應初始頁面加載而觸發，而不是在後續頁面更改後觸發。

在很多情況下，您可以簡單地調整代碼以偵聽turbolinks:load事件，該事件在初始頁面加載時觸發一次，並在每次Turbolink訪問後再次觸發。
document.addEventListener("turbolinks:load", function() { 
    // ... 
}) 

你可以閱讀在README

來源

2017-09-01 04:16:35

謝謝，@SimpleLime！這是問題。正如你所建議的那樣，//// require turbolinks就在application.js文件中 - 並且添加了事件列表器完美工作。對此，我真的非常感激。 – ludditedev

jQuery只在瀏覽器刷新本地Rails項目後才起作用

回答

相關問題