Me enfrento a un problema de evento Click en mi iPhone (7 Plus). El método de clic no funciona en dispositivos IOS. Pero funciona bien en IOS Chrome.
Aquí está el código:
$('.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>Ya probé estos que no me funcionan:
La función de clic no funciona en el navegador Safari
onclick() no funciona en safari
jquery click no funciona en ipad/iphone
¡¡Gracias por la ayuda!!
Encontré esta solución, agregue role="button" en <span> y click event start working for IOS device:
<span class="menuOpen" role="button">Menu</span> También se puede arreglar si reemplazamos <span> con <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>Referencias: