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:

enter image description here

When you hover on it:

enter image description here

This is the code inside the button:

 <div class="s-8"><button type="button" onClick="javascript:location.href = 'administration.php';">Administration</button></div>

The logout button:

<div class="s-4"><button type="button" onClick="javascript:location.href = 'logout.php';">Logout</button></div>

This button works fine on the PC(IE, SAFARI, FireFox, Chrome, Opera) browser(takes me to the administration page, but it doesn't work on the Mobile devices.

I did the same thing for the logout button, and it works fine on PC and Mobile Devices. I am now puzzled.

[**Links aren't buttons**](http://www.karlgroves.com/2013/05/14/links-are-not-buttons-neither-are-divs-and-spans/) & *vice versa* — Paulie_D, Mar 11 '15 at 12:51
@Paulie_D What I don't understand is the inconsistency. That the logout button works but I used the same code — kya, Mar 11 '15 at 12:56
@kya I have tried your code on my android phone with default android browser. it's work correctly — Muhammet Demir, Mar 11 '15 at 12:59
@mdemir Thanks. Then the issue must be with the hosting server and not the code itself. Thanks — kya, Mar 11 '15 at 13:01
Don't put clickable elements in clickable elements. It will break with some browsers and it does not follow HTML 5 standards. — Michelangelo, Mar 11 '15 at 13:18
@mdemir I am trying to figure out where to put a demo for you — kya, Mar 11 '15 at 14:14

score 12 · Accepted Answer · edited May 23 '17 at 12:02

12

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

edited May 23 '17 at 12:02

Community

1
1

answered Mar 11 '15 at 13:13

Git Paul

211
2
4

score 4 · Answer 2 · answered Dec 01 '18 at 14:46

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.

score 3 · Answer 3 · answered Mar 11 '15 at 13:13

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;

answered Mar 11 '15 at 13:13

noa-dev

3,431
9
31
68

3

Note that this generally only applies to iOS, and there are other possible workarounds; see http://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile – cvrebert Mar 12 '15 at 13:10
@JSMorgan can you prepare a fiddle where it's reproducable? – noa-dev Dec 03 '18 at 08:40

Button not working on Mobile Devices but works on PC bootstrap

3 Answers3

Linked