Click event on <span> or <div> tag not working safari issue

Question

I am facing a Click event issue on my iPhone(7 Plus). The click method is not working on IOS devices. But working fine on IOS Chrome.

Here is the code:

$('.menuOpen').on('click', function() {
  console.log('Show Menu');
  $('.menuBar').toggleClass('d-none');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">


<span class="menuOpen">Menu</span>
<ul class="d-none menuBar">
  <li>Action 1</li>
  <li>Action 2</li>
  <li>Action 3</li>
  <li>Action 4</li>
</ul>

I already tried these not working for me:

On click function is not working on safari browser

onclick() not working in safari

jquery click not working on ipad/iphone

Thanks for the help!!

Answer 1

I came across this solution add role="button" on <span> and click event start working for IOS device:

<span class="menuOpen" role="button">Menu</span>

It can also be fixed if we replace <span> with <button>

$('.menuOpen').on('click', function() {
  console.log('Show Menu');
  $('.menuBar').toggleClass('d-none');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">


<span class="menuOpen" role="button">Menu</span>
<ul class="d-none menuBar">
  <li>Action 1</li>
  <li>Action 2</li>
  <li>Action 3</li>
  <li>Action 4</li>
</ul>

References:

Safari HTML Reference

ARIA: button role