Button not working on Mobile Devices but works on PC bootstrap

Question

I created a bootstrap button that has a link inside. Which looks like this:

Answer 1

The issue may be that you're using the onClick event which won't register on a mobile device (as you don't click - you tap).

This answer explains how to use the "touchstart" event which will work on a mobile.

https://stackoverflow.com/a/22015946/2619909

Answer 2

unfortunately neither setting cursor:pointer; nor adding a touchstart event listener

$(document).ready(function() {
  $('#button_id').on('click touchstart', function() {
    window.location.href = "/url";
  });
});

as @noa-dev and @GitPauls suggested worked for me. for reference I tested on my phone7 (ios11.4 and safari)

working solution: I set the z-index of the button to a large positive number and the button now works.

#button_id{
  z-index: 99;
}

solution found thanks to Daniel Acree https://foundation.zurb.com/forum/posts/3258-buttons-not-clickable-on-iphone. I don't know if this generalizes to all iphone/mobile devices.

Answer 3

I know this might be a weird answer. But in some cases mobile clickevents dont work unless you put the style: cursor:pointer; to your button.

Mobile clickEvents are handled very differently, the first "click" or "tap" might be interpreted as a HOVER instead of the click which you are looking for.

So try setting the CSS style of the button to : cursor:pointer;