单击rails link_to后，jQuery不会被触发

问题描述

使用下面的javascript来制作一个由滚动事件触发的图像淡入。但是.hide im用于初始隐藏图像只在最初加载页面时起作用，输入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（）; （（BotElement< = BotView）&&（TopElement> = TopView））; 
 return 
 
 $ b $（document）.ready（function（）{
 $（＃ghost_logo）。hide（）; //最初隐藏它
} ）; 
 $ b $（window）.scroll（function（）{
 isOnView = isElementVisible（＃logoDiv）; 
 
 if（isOnView）{
 //一旦主徽标在视图中，淡出小图像
 $（'＃ghost_logo'）。fadeOut（）; 
} else {
 //主徽标不存在时淡入小图片
 $（'＃ghost_logo'）。fadeIn（）; 
} 
}）; 
  

解决方案

您在涡轮链接，涡轮链接在浏览链接时，DOM不会改变，因此，jQuery中的ready事件永远不会被触发，您可以通过三种方式解决此问题。

您可以尝试如下所示：

  document.addEventListener（'page：load'，function（）{
 $（ #ghost_logo）。hide（）; 
}）; 
  

或者如果这也不起作用，请尝试浏览turbolinks，更改链接参数：

 <％= link_to'Main'，root_path，{：'data-no-turbolink'=> true}％> 
  

或者如果您想要，您可以使用是为解决此类问题而提供的一款宝石。

有关更多信息，请参阅到

im using the javascript below to make an image "fade in" triggered by a scroll event. But the .hide im using to initially hide the image only works when the page loads initially, typing localhost:3000.

Once i'm in the site if i try to click a link to go back to the main page,

<%= link_to 'Main', root_path %>

the main page loads with out the .hide working

Why does the .hide work when the page initially loads but if i click a link to the same page the .hide does not work. the rest of the Javascript works no matter what, i can scroll and the image fades in and out depending on the scroll position, but i need it to start hidden, and that only works when the page loads initially help

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();
    }
});

解决方案

You are having a tipical problem with turbolinks, turbolinks make that DOM doesn't change when you navigate through a links, for this reason, the ready event from jQuery is never fired, you can solve this in three ways.

You can try something like:

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

or if this doesn't work either, try navigate with out turbolinks change a parameter of link:

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

or if you want you can use this jQuery-turbolinks gem is a gem provided for solving this kind of issues.

For more information refer to turbolinks repository on github

这篇关于单击rails link_to后，jQuery不会被触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！