jQuery class on click works on desktop but not mobile

Question

I have FontAwesome icons with class='className'.

<i class="className fas fa-circle"></i>
<i class="className fas fa-circle"></i>

and the below jQuery script.

$(document).on('click', '.className', function () {
    console.log('working');
});

It works fine on desktop but is unresponsive on my iPhone SE Safari browser.

edit: added closing tags, just forgot to add them here, I'm using i, as that is what the FontAwsome site uses?

Are you looking at the browser console via Safari on a connected Mac? — Jon Uleis, Sep 28 '18 at 21:31
Sometimes the icons are just too small in order for a touch event to be registered on an non *active link* element. Any CSS / HTML to share? Otherwise I'll just guess your icons are 300x300px large and everything works. — Roko C. Buljan, Sep 28 '18 at 21:32

score 1 · Answer 1 · answered Sep 28 '18 at 22:12

1

Don't bind to the document, bind to a wrapper of the icons. Not sure why you used the "italic" or stand off element so I changed to a span:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i

$("#myicons").on('click', '.className', function() {
  console.log('working');
});

<div id="myicons">
  <span class="className fas fa-circle" />
  <span class="className fas fa-circle" />
</div>

answered Sep 28 '18 at 22:12

Mark Schultheiss

32,614
12
69
100

The `` element is often used for Font Awesome. – Twisty Sep 28 '18 at 22:30
@Twisty Perhaps, but does not make it "right" IMHO, seems a bit "hijacked" – Mark Schultheiss Sep 28 '18 at 22:31
Incidentally, see [Should I use tag for icons instead of ?](https://stackoverflow.com/questions/11135261/should-i-use-i-tag-for-icons-instead-of-span) – showdev Sep 28 '18 at 22:36

score 0 · Answer 2 · answered Sep 28 '18 at 22:03

Would test with the following:

$(function() {
  $(document).on('click', '.className', function() {
    console.log('working');
  });
});

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<i class="className fas fa-circle"></i>
<i class="className fas fa-circle"></i>

There should be no issue with testing on Mobile versus Desktop. Unless you have some conditional statement that loads different Libraries for Mobile.

If you need further help, please a Minimal, Complete, and Verifiable example.

score -1 · Accepted Answer · answered Sep 29 '18 at 01:34

I had jQuery UI loaded, no longer using, removed it and now pressing the tags works.

I assume if I left jQuery UI and wrapped the tags with a tag it may have worked?

in any case I also used old mates method of selecting the wrapper, not the document.

jQuery class on click works on desktop but not mobile

3 Answers3