javascript - Mobile Safari、jQuery 和绑定(bind)到 future 的 DOM 元素

Question

我有一个为汽车仪表盘显示单元构建的 HTML5/JavaScript 应用程序，我被要求移植到浏览器中运行。

简单的任务，进行一些简单的更改，现在在我尝试过的每个桌面浏览器中一切正常。

然后，问题来了。为了演示目的，我被要求特别确保它可以在 iPad 上运行。

问题:

该应用使用单页导航，当用户导航到不同的“屏幕”时，使用 jQuery.load 加载必要的页面片段。但是，所有 jQuery 绑定(bind)都集中在一个地方，因此它们在应用程序启动时执行，即使它们绑定(bind)到的元素可能尚不存在于 DOM 中。

使用 jQuery.live 或 .on 没问题，因为它们允许绑定(bind)到 future 的 DOM 元素。至少在桌面浏览器中。

在 Mobile Safari 中，.live/.on 根本无法绑定(bind)到尚不存在的元素。

我这里有一个例子来说明这个问题:http://dhines.com/jquery-test/

请注意，所有“应该有效”的链接都可以在桌面浏览器中使用，但不能在移动版 Safari 中使用!

环顾网络和 SO，我发现的唯一解决方案是将 onclick="function(){}"添加到我所有的可点击元素。这看起来很愚蠢。

我看到的另一个选择是分散我的绑定(bind)并让它们发生在它们所应用的特定片段上，但考虑到大量的片段和绑定(bind)，这不会很有趣。

看看我的例子，谁能给我提供更好的解决方案？或者指出我是否错误地使用了 .load 之类的？

Answer 1

我无法测试这个(我没有苹果产品)，但是我发现了一个关于 jquery 票务系统的讨论:

http://bugs.jquery.com/ticket/5677#comment:7

技巧似乎是将 { cursor : pointer } 添加到我看到的元素中，您的示例没有定义此 css 属性。试试这个……

也许 Apple Safari 开发人员认为单击事件对没有 curosr:pointer 的元素没有意义。