I'm "just" trying to bind a click event to a <button> and make it work for Desktop (chrome, FF, ... ), android and iOS.
I tried a lot of stuff such as this cursor: pointer which seemed to be the easiest and most effective but didn't work.
I also tried an onclick='' or onclick='void(0)' on the HTML element, a trick I've seen I don't even remember where ...
I tried with extern libraries such as FastClick to delete to 300ms wait after a click ... Doesn't work
And no more chance with Pointer Events Polyfill and binding with pointerup ...
I've run out of ideas ...
My HTML :
<div class="col-md-12">
<button type="button" onclick='' id="begin" class="btn andro btn-danger btnlg">
<img src="img/icon.png" height="50px"> GO
<img src="img/icon.png" height="50px">
</button>
</div>
My JS :
$(document).on('touchstart', '#begin', function() {
// do things
});
I tried of course to bind touchstart (even touchend !) instead of click and still doesn't work on iphones ...
The problem is : I don't have an iphone to test my stuff so I have to trust some friends who have an iOS device ... Do I have to change my code ... Or change my friends ? ^^
Soooo.... After a lot of searches and tries such as removing one by one libraries and commenting parts of the code...
I was able to find what was messing with the click ... It was because my bindings were encapsulated in a :
$( document ).ready(function() {
// My bindings here
});
and it seems like iOS don't like this ...
Just bind your click out of the ready function and it works... Hope it can help someone !