Skip to content Skip to sidebar Skip to footer

Anchor Tag Not Working In Mobile Browser

i have a slider in my website the anchor tag inside this slider work in PC but not working in mobile browser(android or iphone) for example you can try 'Buy Now' in first slider w

Solution 1:

Not sure what the actual bug is, but judging from these factors:

  1. I tried device mode in Chrome and it worked, but it's not working on my actual iPhone 6 Plus.
  2. There doesn't appear to be a JavaScript warning related to this issue.
  3. The markup is there for the link (if you hold the button down while the slider is open on an iPhone, it brings up the iOS menu at the bottom showing the URL asking if you want to open it in a new tab).

It appears there's something blocking the event on touch. This is a VERY messy method of fixing it, but it should do the trick:

<script type="text/javascript">

jQuery(document).ready(function($) {
  $("#buynwa").on("touchstart", function(event) {
      window.location.href = $(event.target).attr('href');
    });
 });

</script>

Try pasting this immediately before the </body> tag in your footer.php file, under any other scripts. What it will do is look for the touchstart event on that very first anchor tag in the first slide, grab the href attribute, then route to that page. If it works, the $("#buynwa") portion of the code will need to be adapted with the other ids of the other anchor tags, because there doesn't appear to be any common class shared between them. You'd inspect element, and change the jQuery selector to $("#buynwa, #id2, #id3").


Post a Comment for "Anchor Tag Not Working In Mobile Browser"