Menu
HTML:
<div id="footer"> <a class="button1 selected" id="button1" href="#"><div class="icon"></div><div class="text">Option 1</div></a> <a class="button2" id="button2" href="#"><div class="icon"></div><div class="text">Option 2</div></a> <a class="button3" id="button3" href="#"><div class="icon"></div><div class="text">Option 3</div></a> <a class="button4" id="button4" href="#"><div class="icon"></div><div class="text">Option 4</div></a> </div> JS:
$('#button1').click(function() { alert('button1'); }); $('#button2').click(function() { alert('button2'); }); Now, this script works perfectly on my PC Browser but it doesn't work on iOS. I've tried this solution too: $(document).click() not working correctly on iPhone. jquery but it doesen't work.
I am using on jQuery 1.8.3, no jQuery Mobile (I prefer not to).
Somebody can help me with this?
878
Try to add a pointer cursor to the button and use .on to bind the click event.
$('#button1').css('cursor','pointer'); $(document).on('click', '#button1', function(event) { event.preventDefault(); alert('button1'); }); I came across this: http://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html
In short, one of these conditions needs to be met for iOS browsers to generate click events from touch-events:
- The target element of the event is a link or a form field.
- The target element, or any of its ancestors up to but not including the
<body>, has an explicit event handler set for any of the mouse events. This event handler may be an empty function.- The target element, or any of its ancestors up to and including the document has a cursor: pointer CSS declarations.
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
