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

`I don't have an iphone to test my stuff` if you use Safari there's an option in the dev console to make it emulate an iPhone — Rory McCrossan, Mar 22 '17 at 07:57
Habe you tried removing the onclick attribute from your button element? My guess is that because it's just an empty string Safari on iPhone ignores any events on the button — Patrick Hund, Mar 22 '17 at 08:00
@RoryMcCrossan : I should try that thanks for the info :) .. Does it emulate a truly iOS device ? ... @PatrickHund : I have to admit that I don't think I've tried to bind touchstart without `onclick=''` but if I use `touchstart` it won't trigger on Desktop or i'll have to sniff for user agent like here : http://stackoverflow.com/a/34493059/3636091 or you know some workaround ? — Seba99, Mar 22 '17 at 08:16

score 1 · Accepted Answer · answered Mar 27 '17 at 07:44

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 !

How to bind a click event in iOS?

1 Answers1