1

This is really a weird behavior and I have spent a huge amount of time but couldn't figure this out.

The functionality is:

There is a div in the root structure which acts as a mobile button when clicked, it opens a navigation div which is a sibling div of the parent of above div this div has <'ul'> and <'li'> each <'li'> contains sub navigation, when clicks on the sub-navigation links, it opens the third level of navigation without leaving a page. then when I click on the above button to close the menu, it doesn't work the first time, then when I click it again the second time then it closes the menu.

HTML:

<div id="headerArea">
    <div id="header-navigation">mobile menu/close button</div>
</div>

<div id="navigationMenu">
    <ul>
        <li><a>Link1</a></li>
        <li><a>Link2</a></li>
        <li><a>Link3</a></li>
    </ul>
</div>

JQuery:

$('#header-navigation').on('click',function(e){
    // This is a mobile menu when clicks, open the sub navigation and click back again it should close the menu but when clicks on sub navigation, then the first click doesn't work and it does on the second click. 
 });

$('#navigationMenu li a').on('click', function(){
    // when this clicks, the above link doesn't work the first time but it works the second time.
});

I did another experiment, on the page load, I injected another link inside #navigationMenu but outside the <'ul'> and it was the same behavior then I again injected the same link inside "#navigationMenu ul" then the click event of the link works first time.

This is something to do with then clicks inside the <'li'> for some reason any link outside the <'ul'> doesn't work

orbnexus
  • 648
  • 7
  • 31
  • From what's posted, nothing indicates a reason why it *«doesn't work the first time, but work the second time»*. Your posted code may be *too minimal*. It also has to be *complete* in order to reproduce. Please read [MCVE](https://stackoverflow.com/help/mcve) -- Also, it is unclear what you mean with *«I injected link»*... That may mean a dynamic element. In this case, look for [Event binding on dynamically created elements](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) – Louys Patrice Bessette Mar 20 '19 at 19:03

1 Answers1

2

I just fixed that issue by doing the following. As I mentioned this is a weird issue and was only happening on iPhone - Safari

JQuery:

$('#header-navigation').on('touchstart click',function(e){
    e.preventDefault(); //The reason I added that, with "touchstart", it was firing ghost clicks
});
orbnexus
  • 648
  • 7
  • 31