How to bind a click event in iOS?

Question

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 ? ^^

Answer 1

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 !