iPad 上未调用 jQuery 单击处理程序

发布于 2024-12-10 11:11:06 字数 1318 浏览 1 评论 0原文

我有一个使用 jQuery 的项目和很多动态生成的内容。最左上角的元素上有一个点击处理程序（“初始”分数），它在桌面版 Safari 上运行良好，但在移动版 Safari 上根本不被调用；灰色覆盖层永远不会出现，并且不会采取任何操作。生命值区域上的点击处理程序（右侧的 172）和状态（底部的“添加状态效果”；确认；它出现在肖像上方）也是同样的情况：所有功能都适用于桌面设备，但不适用于移动 Safari。

我已将代码简化为以下内容：

<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() {})！

原文

I have a project using jQuery and a lot of dynamically-generated content. There is a click handler on the upper-left-most element– the "initiative" score– and it works fine on desktop Safari but isn't called at all on Mobile Safari; the gray overlay never appears and no action is taken. It's the same story with the click handler on the Hit Points area (the 172 at right) and the status ("Add Status Effect" at bottom; confirm; it appears over the portrait): all work on desktop but not mobile Safari.

I've reduced the code to the following:

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

Update

This appears to be much simpler now than when I originally asked this question 10 months ago; using modern Mobile Safari all click handlers will register as normal. So go forth and just use $(...).click(function() {})!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

橪书 2024-12-17 11:11:06

我们可以做一些黑客的事情，只需将 onclick 添加到我们想要可点击的任何内容中。但是“正确”的方法来做到这一点似乎正在使用适合 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', '');

另一种方法是绑定到多种的事件，并对任何一个被呼叫的人感到满意。

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

We could do the hackish thing and just add onclick to anything we want clickable. But the "right" way to do this seems to be using an iPad-appropriate event:

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', '');

Another way to do it is to bind to multiple events and be happy with whichever one gets called.

I'm currently using the first solution; I might try the other one, as I think it's cleaner.

回复收藏 0 原文