Question

我有一个使用jQuery和大量动态生成内容的项目。左上角元素上有一个click处理程序 - “计划”得分 - 它在桌面Safari上工作正常但在Mobile Safari上根本没有调用;灰色覆盖层永远不会出现，也不会采取任何措施。与点击区域（右侧172）的点击处理程序和状态（底部的“添加状态效果”;确认;它出现在肖像上）的情况相同：所有工作都在桌面上但不是移动Safari。< / p>

我已将代码缩减为以下内容：

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script>
      $(function() {
        $('#dynamic').click(function() {alert("works")});
        $('#dynamic-with-onclick').click(function() {alert("works")});
        $('#dynamic-with-dynamic-onclick').click(function() {alert("works")}).attr('onclick', '');
      })
    </script>
  </head>
  <body>
    <ul>
      <li id='static' onclick='alert("works")'>If there's an onclick it's called</li>
      <li id='dynamic'>And if there's no onclick the iPad won't see other click events</li>
      <li id='dynamic-with-onclick' onclick=''>But if there is one all events are called</li>
      <li id='dynamic-with-dynamic-onclick'>And if we add one everything works</li>
    </ul>
  </body>
</html>

更新

现在看起来比10个月前我最初提出这个问题要简单得多;使用现代Mobile Safari，所有点击处理程序都会正常注册。所以，请继续使用$(...).click(function() {})！

Answer 1

我们可以做hackish事情，只需将onclick添加到我们想要点击的任何内容中。但the "right" way to do this似乎正在使用适合iPad的活动：

var hitEvent = 'ontouchstart' in document.documentElement
  ? 'touchstart'
  : 'click';
$('#dynamic').bind(hitEvent, function() {alert("works")});
$('#dynamic-with-onclick').bind(hitEvent, function() {alert("works")});
$('#dynamic-with-dynamic-onclick').bind(hitEvent, function() {alert("works")}).attr('onclick', '');

另一种方法是bind to multiple events，并对任何人被召唤感到满意。

我目前正在使用第一种解决方案;我可能会尝试另一个，因为我认为它更清洁。

Answer 2

现在回答很晚，但对于其他寻求解决方案的人来说，答案是：

iPad对非锚元素点击事件有不同的行为。它将首次点击事件识别为悬停。

我找到的解决方案是

添加onclick =＆＃34;＆＃34;属性到该元素或

＆＃34;光标：指针＆＃34; css property。

此解决方案中的任何一个都会告诉iPad该元素是可点击的区域。

（通过http://swsharinginfo.blogspot.in/2013/03/solution-for-click-event-issue-on-ipad.html）

在iPad上没有调用jQuery单击处理程序

更新

2 个答案: