2

I have the following hiperlink

<a href="courses.html"><i class="fa fa-thumbs-up icon_1" style="font-size: 20px; transition: color 0.2s ease 0s, border-color 0.2s ease 0s, background-color 0.2s ease 0s; min-height: 0px; min-width: 0px; line-height: 20px; border-width: 0px 2px 0px 0px; margin: 0px; padding:0px 10px 0 0; letter-spacing: 0px;"></i>Test Text</a>

As it can be see it point to another one page inside my app. The problem is on "mobile version of the site - responsive one" - redirect is happen only if the user click in begin of the "button". If for example i click between Test and Text or at the end of Text word redirect is not happen at all.

enter image description here

I tried to add an Id and capture the click event with Jquery and remove the icon that the element has on the photo:

<a id="TestClick" href="courses">Test Text</a>

$("#TestClick").click(function () {
    console.log("BLA BALDS:LAD:LA")
});

No luck again the element has to be click at the begin of the text in order to detect the click event

enter image description here

I tried last code with and without href="courses" inside "a" tag. I want to mention that the problem is only happen when the page is used on mobile device and inside Google Chrome`s toggle devise tool turn on. I want to fix this because i really annoying for the user to click more then once on some "button"

NDym
  • 79
  • 12
  • Can you reproduce at a site like JSBin or something? I think some code is missing because, for example, `#TestClickCourses` isn't associated with any HTML you've posted. If you can reproduce on JSBin or similar we can help better. If not, I might take a look that: 1. there's not any elements overlapping your element making it unclickable because the overlapping element is blocking or 2. you're trying to select a child element to be the clickable element and you want a parent – Oscar Godson Aug 28 '17 at 07:53
  • https://jsbin.com/wigisexapa/edit?html,js,console – NDym Aug 28 '17 at 08:17

1 Answers1

0

Put &nbsp; in place of each space character. something like this:

<a id="TestClick" href="courses">Test&nbsp;Text</a>

Mahdi P.
  • 167
  • 1
  • 5
  • put your code in span tag like this `Test Text` and try again. – Mahdi P. Aug 28 '17 at 08:25
  • Test Text No luck again. I also tried Test Text  but it didnt work also. Why this element is acting like this Oo – NDym Aug 28 '17 at 08:36
  • try this jQuery code: `jQuery(document).ready(function(){ jQuery('TestClickCourses').click(function(){ window.location.replace('/courses.html'); }); });` – Mahdi P. Aug 28 '17 at 08:42
  • let me know if you are using a css framework like bootstrap. – Mahdi P. Aug 28 '17 at 08:44
  • Again is only trigger at the begin on the text(like i shown on the photos).Why this is happen only on mobile devices ? Yes im using bootstrap. – NDym Aug 28 '17 at 08:47
  • i think it's a problem with bootstrap because i had the same problem. i think on this page you can find good answers for solve your problem. follow [here](https://stackoverflow.com/questions/22015908/onclick-not-working-on-mobile-touch/22015946#22015946) – Mahdi P. Aug 28 '17 at 08:58
  • someone proposes to use `touchstart` event with `.on()` jQuery method – Mahdi P. Aug 28 '17 at 09:00
  • good luck and let me know if you have success in resolving your problem. – Mahdi P. Aug 28 '17 at 09:01