Hey there! Let's figure out why your "BOOK NOW" button works on desktop but won't register clicks on mobile—since other buttons are functioning, it's definitely a specific issue tied to this element or its surrounding code. Here are actionable fixes to test out:

1. Fix the Broken HTML Tag First #

Looking at your code snippet, the outer <div class="div2"> has an invalid closing tag (<div> instead of </div>). This messed-up DOM structure can cause rendering glitches, especially in mobile browsers that might be stricter about syntax. Start by correcting this:

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

This is often the hidden culprit for weird mobile-only issues, so tackle this first!

2. Check for Overlapping Elements (Most Common!) #

Mobile layouts sometimes have elements that are positioned on top of your button (even if they're transparent or off-screen slightly). To debug:

• Use Chrome DevTools' Device Toolbar to switch to a mobile view, then right-click the button and select "Inspect" to check the element's stacking context.
• Test quickly by adding temporary CSS to boost the button's z-index:

  #buttonid {
      position: relative;
      z-index: 9999;
  }
  

If the button starts working, you'll need to find the overlapping element (maybe a header, banner, or absolutely positioned div) and adjust its z-index or positioning.

3. Update the Click Handler #

Inline onclick can have subtle compatibility issues on some mobile browsers. Swap it out for a proper event listener in your JavaScript:

document.addEventListener('DOMContentLoaded', function() {
    const bookBtn = document.getElementById('buttonid');
    bookBtn.addEventListener('click', function() {
        console.log('Button clicked!'); // Use console log first to avoid alert blockers
        // alert('Booking initiated!');
    });
});

Also, some mobile browsers block unsolicited alerts—using console.log first will let you confirm if the click event is actually firing.

4. Add Mobile-Friendly CSS Tweaks #

Sometimes mobile browsers need extra hints to recognize an element as clickable:

#buttonid {
    cursor: pointer; /* Visual hint, but helps some mobile engines */
    touch-action: manipulation; /* Prevents double-tap zoom and improves touch responsiveness */
}

Also, double-check that no media queries are applying pointer-events: none; to the button or its parent div—this property completely disables click/touch interactions.

5. Test for Touch Event Support #

Older mobile devices might require explicit touch event handling. Add a touch listener alongside the click handler to cover all bases:

bookBtn.addEventListener('touchstart', function(e) {
    e.preventDefault(); // Prevents accidental double-fires
    console.log('Touch detected!');
    // Your booking logic here
});

Start with fixing the HTML tag error—odds are that's the main issue. If not, work through the other steps one by one, testing after each change. You'll get that button working on mobile in no time!

内容的提问来源于stack exchange，提问作者Vivek Mangal