I am working on a web application.

In one of HTML page, I have following code snippet:

<div class="div2">    
<button id="buttonid" type="button" class="btn-submit pull-right" onclick="alert()">BOOK NOW</button>
<div>

This code is working fine in browsers of PC. But when I try it in browsers in mobile device, a button is not clickable. There are also many buttons in the same page but they are working fine. I tried very hard finding a solution online but none worked.

I am working on a web application.

In one of HTML page, I have following code snippet:

<div class="div2">    
<button id="buttonid" type="button" class="btn-submit pull-right" onclick="alert()">BOOK NOW</button>
<div>

This code is working fine in browsers of PC. But when I try it in browsers in mobile device, a button is not clickable. There are also many buttons in the same page but they are working fine. I tried very hard finding a solution online but none worked.

• javascript
• jquery
• html
• browser

• 4 Check to see if some other div elements are overlapping the button in mobile device, if you are using responsive css, cause that should work. – AntonyMN Commented May 29, 2018 at 10:18
• Thanks @AntonyMN. problem was in styles of div elements. – Vivek Mangal Commented Jun 1, 2018 at 9:47

4 Answers 4

Few observations : - Not sure why have u added a div wrapper around the button. Try removing the div wrapper - Your html mark up needs to be checked, since you are trying to view a html page on a mobile, if the elements are not structured properly, then there are high chances that one of the element be overlapping on the button. Hence the click event is not getting triggered for the button rather then it might be trying to trigger the click event of the overlapping element

The tag defines a clickable button.

Inside a element you can put content, like text or images. This is the difference between this element and buttons created with the element.

Tip: Always specify the type attribute for a element. Different browsers use different default types for the element.

A clickable button is marked up as follows:

<button type="button">Click Me!</button>

ELSE

<button name="favorite" type="button">
  <svg aria-hidden="true" viewBox="0 0 10 10"><path d="m7.4 8.8-2.4-1.3-2.4 1.3.46-2.7-2-1.9 2.7-.39 1.2-2.5 1.2 2.5 2.7.39-1.9 1.9z"/></svg>
  Add to favorites
</button>

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./a/22015946/2619909

See here :) Button not working on Mobile Devices but works on PC bootstrap

I solved this issue like this. Try setting position:relative and z-index:-1 to the container element of the button