外部加载的导航无法在移动设备上运行

Question

我有一个导航，它是一个UL，位于一个外部html文件中，并使用jQuery调用到页面中。但是，导航无法在移动设备上使用，这意味着单击切换开关（汉堡图标）时菜单不会下拉。导航在桌面上加载正常。

我知道这是一个逻辑问题，但我似乎无法意识到。我怀疑切换图标是通过某些JS处理的，但由于直到jquery从外部文件中获取该切换图标后，它才会加载到文档中，所以该切换图标由于尚未存在而未被激活。

我不认为jquery是有问题的代码，与我如何加载它或使代码使逻辑中所缺少的东西一样，它使切换图标能够显示和隐藏导航。

不过，这里是代码，它是异步加载的，并且在加载之前声明了jQuery。

我有一个空的div，菜单/导航就像

<div id="navi"></div>

然后

<script type="text/javascript">
$(document).ready(function(){        
  $('#navi').load('main-nav.html'); 
});
</script>

The code that handles the click on the toggle icon:

$('.trigger').on('tap', function(e){
    e.stopPropagation();
    $('#navigation').toggleClass('active'); // Toggle responsive menu
});

但是，在移动设备或将导航更改为下拉导航的任何视口上，单击切换图标时，导航不会打开。