Turbolinks и события не срабатывают должным образом

Question

Я строю веб-сайт с использованием шаблона с большим количеством встроенного 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 и имея огромные проблемы с наличием всего это Работа. Ситуация:

• Открыть navmenu, работает нормально, нажмите на ссылку, следует ссылке тонкой
• Открыть другое меню, открывается прекрасным, нажмите на ссылку, все хорошо
• Попробуйте открыть другое меню. Старый, который был открыт, закрывается, но ничего больше не открывается, и скрипт больше ничего не делает.

Любая идея, что я могу делать неправильно здесь? Я думал о том, чтобы просто отказаться от турбовинтов, но мне очень нравится плавный переход.

Answer 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"); 
});