单击的jQuery类可在台式机上运行，​​但不能在移动设备上

Question

我有带有class ='className'的FontAwesome图标。

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

和下面的jQuery脚本。

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

它在台式机上运行良好，但在我的iPhone SE Safari浏览器上无响应。

编辑：添加了结束标记，只是忘了在此处添加它们，我在用i，因为那是FontAwsome网站使用的标记？

Answer 1

不绑定到文档，而是绑定到图标的包装。不知道为什么要使用“斜体”或“ stand off”元素，所以我改为跨度：

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>

Answer 2

将使用以下内容进行测试：

$(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>

在移动设备和台式机上进行测试应该没有问题。除非您有一些条件语句来加载不同的Mobile库。

如果您需要进一步的帮助，请Minimal, Complete, and Verifiable example。

Answer 3

我已加载jQuery UI，不再使用，将其删除，然后按标记即可。

我假设是否离开jQuery UI并用可能会起作用的标签包裹标签？

无论如何，我还使用旧的mates方法来选择包装器，而不是文档。