Turbolinks 和事件未正确触发答案

【问题标题】：Turbolinks and events not firing properlyTurbolinks 和事件未正确触发
【发布时间】：2015-09-22 08:51:30
【问题描述】：

我正在使用包含大量嵌入式 jQuery 的模板构建网站，但遇到 turbolinks 和事件无法正常触发的问题。

我有以下代码：

var uiNav = function() {
    // When a submenu link is clicked
    jQuery('[data-toggle="nav-submenu"]').on('click', function(e){
        // Get link
        var $link = jQuery(this);

        // Get link's parent
        var $parentLi = $link.parent('li');

        if ($parentLi.hasClass('open')) { // If submenu is open, close it..
            $parentLi.removeClass('open');
        } else { // .. else if submenu is closed, close all other (same level) submenus first before open it
            $link
                .closest('ul')
                .find('> li')
                .removeClass('open');

            $parentLi
                .addClass('open');
        }

        // Remove focus from submenu link
        if ($lHtml.hasClass('no-focus')) {
            $link.blur();
        }

        return false;
    });
};

处理折叠菜单。该函数由其他布局助手初始化：

jQuery(document).on('page:change', function() {
    if (typeof angular == 'undefined') {
        App.init();
    }
});

App.init 只是触发 uiNav 和其他功能。

此外，我还有下面的脚本来处理向菜单添加适当的类，具体取决于您在应用程序中的位置

$(document).on('page:change', function() {
    var url = window.location.pathname;
    $('[href="' + url + '"]').closest("ul").parent().addClass("open");
    $('[href="' + url + '"]').addClass("active");
});

现在我正在使用 turbolinks，但在让它正常工作时遇到了很多问题。情况是：

打开导航菜单，工作正常，点击链接，点击链接正常
打开其他菜单，打开正常，点击链接，一切正常
尝试打开不同的菜单。打开的旧版本关闭，但没有其他任何东西打开，脚本不再执行任何操作。

知道我在这里做错了什么吗？我本来想只删除 turbolink，但我非常喜欢平滑的过渡。

【问题讨论】：

标签： jquery ruby-on-rails ruby-on-rails-4 turbolinks

【解决方案1】：

最后想通了。向初始化函数添加了一些 console.log 以查看它在做什么。结果是3次、5次、7次等等……

解决方案是将初始化程序更改为以下内容：

jQuery(document).on('ready page:change', function() {
    if (typeof angular == 'undefined') {
        App.init();
    }
    jQuery(document).off('page:change')
});

加上添加类的脚本：

$(document).on('ready page:change', function() {
    var url = window.location.pathname;
    $('[href="' + url + '"]').closest("ul").parent().addClass("open");
    $('[href="' + url + '"]').addClass("active");
});

【讨论】：