Question

我在应用主页上的某些链接上使用了淡入淡出效果。这是由一些JQuery实现的：

Javascript角/ pages.js

$(document).ready(function() {
    $('.home_tile_text').hide().removeClass('text').addClass('text-js');
    $('.home_tile_overlay').hide().removeClass('overlay').addClass('overlay-js');

    $('.home_tile').mouseenter(function(){
        $(this).find('.text-js').finish().hide().fadeIn();
         $(this).find('.overlay-js').finish().hide().fadeIn();
    });
    $('.home_tile').mouseleave(function(){
        $(this).find('.text-js').finish().show().fadeOut();
         $(this).find('.overlay-js').finish().show().fadeOut();
    });
});

当我第一次启动应用程序时，这一切都很有效。但是，如果我离开主页，当我回来时，淡入淡出效果在我“刷新”页面之前不再有效。有什么想法吗？

Answer 1

这可能是因为Rails 4的新功能Turbolinks。 Turbolinks仅通过更新更改页面的部分来减少来自客户端的服务器请求。这意味着在加载新页面时，document.ready（或jQuery中的$(document).ready）不会再次被调用。

一种解决方案是删除gemfile中的gem 'turbolinks'和application.js中的require turbolinks，从而禁用turbolinks，但更简单的解决方法是在应用程序中添加require jquery.turbolinks .js文件，其中包含一个turbolinks脚本，可以通过在每个turbolinks调用上调用$(document).ready来解决问题。

有关更多信息，请参阅jQuery section in the turbolinks readme。

Rails App中的JS仅在第一次加载

1 个答案: