javascript - 单击 rails link_to 后未触发 jQuery 准备就绪

Question

我正在使用下面的 javascript 使滚动事件触发的图像“淡入”。但是最初用于隐藏图像的 .hide 仅在页面最初加载时有效，输入 localhost:3000。

进入网站后，如果我尝试单击链接返回主页，

<%= link_to 'Main', root_path %>

主页在没有 .hide 工作的情况下加载

为什么 .hide 在页面最初加载时起作用，但如果我单击指向同一页面的链接，.hide 不起作用。 Javascript 的其余部分无论如何都可以工作，我可以滚动并且图像根据滚动位置淡入和淡出，但我需要它开始隐藏，并且只有在页面最初加载时才有效帮助

function isElementVisible(elementToBeChecked) {
    var TopView = $(window).scrollTop();
    var BotView = TopView + $(window).height();
    var TopElement = $(elementToBeChecked).offset().top + 100;
    var BotElement = TopElement + $(elementToBeChecked).height();
    return ((BotElement <= BotView) && (TopElement >= TopView));
}

$(document).ready(function(){
    $("#ghost_logo").hide();// hide it initially
});    

$(window).scroll(function(){
    isOnView = isElementVisible("#logoDiv");

    if (isOnView) {
        //fade out small image once main logo is in view
        $('#ghost_logo').fadeOut();
    } else {
        //fade in small image once main logo is out of view
        $('#ghost_logo').fadeIn();
    }        
});

Answer 1

您遇到了 turbolinks 的一个典型问题，turbolinks 使得当您通过链接导航时 DOM 不会改变，因此，jQuery 的 ready 事件永远不会被触发，您可以通过三种方式解决这个问题。

你可以试试这样的:

document.addEventListener('page:load', function(){
    $("#ghost_logo").hide();
});

或者如果这也不起作用，请尝试在没有 turbolinks 的情况下导航并更改链接的参数:

 <%= link_to 'Main', root_path ,{ :'data-no-turbolink' =>  "true" } %>

或者如果你愿意，你可以使用这个 jQuery-turbolinks gem是为解决此类问题而提供的 gem。

有关更多信息，请参阅 turbolinks repository on github