Question

我有这两个jQuery函数，如果我刷新浏览器窗口就可以正常工作......但是如果我只是点击网站，下面的jQuery就不会执行了。我没有收到任何控制台错误。我尝试将其包装在$(window).on('load', function() { ... }和$(function(){ ... }中。我也尝试过像这样单独包装：$( ".accordion" ).on('load', function() { ... }。

任何想法都会受到赞赏，因为这是我在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的问题吗？对于我以前遇到过的当地环境，这有点奇怪吗？感谢您的任何建议。

Answer 1

您的项目可能正在使用Turbolinks，您可以通过在 Gemfile 中查找turbolinks或检查 app / assets / javascripts / application来查看此项。 //= require turbolinks的js 。 Turbolinks的作用是：

当您点击链接时，Turbolinks会自动提取该页面，在其<body>中进行交换，并合并其<head>，而不会产生整页加载费用。

因此，您实际上只加载了一次页面，然后Turbolinks接管并从此伪装入页面。在自述文件的Running JavaScript When a Page Loads部分：

您可能习惯于安装JavaScript行为以响应window.onload，DOMContentLoaded或jQuery ready事件。使用Turbolinks，这些事件只会响应初始页面加载而不会在任何后续页面更改后触发。

在许多情况下，您只需调整代码即可收听turbolinks:load事件，该事件会在初始页面加载时触发一次，并在每次Turbolinks访问后再次触发。
document.addEventListener("turbolinks:load", function() {
  // ...
})

您可以在README

中详细了解相关信息

jQuery仅在浏览器刷新本地Rails项目后才有效

1 个答案: