Button not working on Mobile Devices but works on PC bootstrap

onclick not working on mobile
react onclick not working on mobile
bootstrap button not working
bootstrap 4 not working
jquery click not working on mobile
bootstrap button hover not working
javascript not working on mobile
bootstrap button onclick not working

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

When you hover on it:

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.

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

html button not working in mobile device, Few observations : - Not sure why have u added a div wrapper See here :) Button not working on Mobile Devices but works on PC bootstrap. 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 Javascript - Button not working on Mobile Devices but works on PC bootstrap

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;

Button not working on Mobile Devices but works on PC bootstrap, 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  select option not working in mobile (2) I'm using html select in the bootstrap col, but when i click drop down button in the mobile device(iOS and Android), it can not display the option list. But it works in the PC browser. The html code is like below:

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.

The 10 Most Common Bootstrap Mistakes That Developers Make , We will take a look at 10 of the most common Bootstrap mistakes, problems, and media queries work, but you need to understand how responsive design works​. to be aware of when dealing with modals on mobile devices with virtual keyboards. Common Bootstrap Mistake #6: File input button component problem. I've developed a simple website with a bootstrap navbar, which is collapsible on mobile devices. I tried everything, but as of now the navbar toggle icon doesn't show up on mobile devices. You can still click the rectangle in top right corner and then the collapsible menu shows up, but I think that most of the users may not know of that.

Browsers and devices · Bootstrap, Alerts · Badge · Breadcrumb · Buttons · Button group · Card · Carousel · Collapse · Dropdowns Chrome, Firefox, Safari, Android Browser & WebView, Microsoft Edge Internet Explorer 10+ is supported; IE9 and down is not. This work was never fully completed or enabled, but to avoid complete breakage, we've opted to​  Thus, this will not work properly on any touch-enabled devices. Bootstrap Mistakes Conclusion. I hope this short Bootstrap guide will help you to avoid some of the common mistakes, clear usual misconceptions, and help you to get most of the framework. Keep in mind, Bootstrap is not for everyone, nor is it suited for every project.

<a> tag using Bootstrap class="btn" not working as intended, <a> tag using Bootstrap class="btn" not working as intended I get a very nice looking button object but it doesn't link properly. w/ <a> tag then the link works fine but it's a strict text link instead of the button I want. Correlation VS Causation Permutation VS Combination Computer Programming JWT  Then you'll learn how to use a Bootstrap Standard Navbar Button for mobile devices. To be able to use Bootstrap, you must install it first. For the purpose of this tutorial, you can install it anywhere on your local PC - it doesn't have to be a web server. Let's do it together. Step #1. Download Bootstrap

Button dropdown links don't work on mobile (android, iOS) · Issue , Button Dropdown Menu Items not clickable on iPhone #4756 the fix by Bitergia/​bootstrap@25e8eeb worked for me as well, but the @cvrebert how along this branch (3.0.0-wip) to bootstrap that I have on my computer? To: bootstrap@noreply.github.com CC: mirubinstein@gmail.com Subject: Re: [bootstrap] Responsive does not work properly with Windows Phone 8 . Hi, I had same issue and I removed this line from repsonsive css @-ms-viewport {width: device-width;} Works well for me after that — Reply to this email directly or view it on GitHub.

Comments
  • what's the browser you use on mobile?
  • Links aren't buttons & vice versa
  • @MaximMai I am using the default android browser
  • @Paulie_D What I don't understand is the inconsistency. That the logout button works but I used the same code
  • Is the logout button a link? Seems unlikely.
  • Note that this generally only applies to iOS, and there are other possible workarounds; see developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
  • @JSMorgan can you prepare a fiddle where it's reproducable?