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!!
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:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.