0

I have a navigation which is a UL that sits in an external html file, and is called into the page with jQuery. However, the navigation will not work on mobile, meaning the menu doesn't drop down when the toggle switch is clicked (the hamburger icon). The navigation loads fine in desktop though.

I know it's a logic issue, but I cannot seem to realize it. I suspect that the toggle icon is dealt with via some JS but since it is not loaded into the document until the jquery fetches it from the external file, then it isn't activated upon as it doesn't yet exist.

I don't think that the jquery is the code in question, as much as how I'm loading it or what I'm missing in the logic to make the code enables the toggle icon to show and hide the navigation.

Nonetheless, here is the code, which is loaded asynchronously and jQuery is declared prior to it loading.

I have an empty div where the menu/navigation is to go like 

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

and then

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

However, on mobile or any viewport that changes the nav to a drop down nav, it doesn't open when clicking the toggle icon.

abtecas
  • 279
  • 2
  • 4
  • 13
  • 1
    _"it doesn't open when clicking the toggle icon"_ So where's the code that handles that click? There's a high likelihood this is a duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) – Phil Feb 22 '19 at 06:18
  • I admittedly don't know where the code is that handles that. I've inherited this code and am attempting make it so that any change in a navigation doesn't require one to open up the 100+ pages they have with the navigation on. – abtecas Feb 22 '19 at 06:28
  • Looks like this is the code that handles the click on the toggle icon: $('.trigger').on('tap', function(e){ e.stopPropagation(); $('#navigation').toggleClass('active'); // Toggle responsive menu }); – abtecas Feb 22 '19 at 07:26
  • 1
    Change it to `$(document).on('tap', '.trigger', function(e) { ... })` – Phil Feb 22 '19 at 07:31
  • That did it. Thanks – abtecas Feb 22 '19 at 07:41
  • Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) – Phil Feb 22 '19 at 07:45
  • So if I'm not mistaken, what we did here was take off the listener from the trigger class since the event wasn't binded (bound?) to it from the jquery loading it in? It seems to me that we can't have two events in separate functions on the same element or object (sorry if my terminology is off)? So what this did was place the event on the document (page) loading but target the class of the element that will do the action? – abtecas Feb 22 '19 at 15:05
  • BTW, now the navigation won't close. Have a look if you have time: https://runningh20.com/about – abtecas Feb 22 '19 at 15:08

0 Answers0