Question

我有一个带有图像链接的浮动图像，你可以进入主页，当你将鼠标悬停在它上面时会出现一个“缩小”图标，这样你就可以将这个图像最小化并移动到导航栏中。这个浮动的固定图像在所有视图中共享，它位于application.html.erb文件中。 HTML看起来像这样：

<div class="col-sm-12 profile-float-container">
    <div class="profile-float-wrapper">
        <span class="glyphicon glyphicon-zoom-out minimize"></span>
        <a href="/">
            <img class="img-circle profile-nav-img" src="/system/users/avatars/000/000/004/small/dog.jpg?1438125939" alt="Dog">
        </a>
    </div>
</div>

有效。但是，当发生这种情况时，跳转到应用程序中的任何其他页面后，javascript将完全禁用。

这是javascript，位于application.js：

$(function() {
    $('.minimize').on('click', function() {
        $('.profile-float-wrapper').fadeOut();
        $('.profile-nav-li').fadeIn();
    });

    $('div, span').on('click', function() {
        alert($(this).attr('class'));
    });
});

为了解释会发生什么，首先点击浮动图像时会弹出警报，当然效果也会起作用。但是，之后在浏览应用程序时单击任何div或span不会触发任何警报。这就像没有加载javascript。

Answer 1

听起来这可能是Turbolinks妨碍了。由于未使用Turbolinks重新加载文档，$(document).ready(function(){})（或缩短版本$(function(){})）不会被解雇。您还需要挂钩Turbolinks页面加载事件。

var ready;
ready = function() {
   $('.minimize').on('click', function() {
        $('.profile-float-wrapper').fadeOut();
        $('.profile-nav-li').fadeIn();
    });

    $('div, span').on('click', function() {
        alert($(this).attr('class'));
    });
};

$(document).ready(ready);
$(document).on('page:load', ready);

您可以在此处了解有关Turbolinks事件的更多信息https://github.com/rails/turbolinks#events。

Turbolinks自动包含在新的Rails 4项目中，因此很可能会导致您的问题。如果要完全禁用data-no-turbolink标记，请添加<body>，或按照以下步骤完全卸载。

从Gemfile中删除gem "turbolinks"并捆绑安装。
从application.js

//= require turbolinks

删除布局视图中的所有data-turbolinks-track属性。

Rails 4：首次刷新后javascript无法正常工作

1 个答案: