移动Safari和jQuery事件，没有什么是射击？

好的，所以我有一个用HTML5 / JavaScript编写的应用程序，用于内置汽车装置。 这是一个“单页”的应用程序，在主页面上为了响应不同的事件而将片段加载到div中。

我被要求将其移植到浏览器，以便它可以用于市场营销，演示等等。

这看起来不是什么大事，因为几乎没有什么适应，只需要调整一些CSS，以便它可以在所有浏览器中显示相同。 然后，他们决定他们想要运行webapp的设备将是一个iPad。

该应用程序在Safari中效果很好，所以我不认为我会在移动Safari中遇到任何问题。 立即意识到，情况并非如此。 在移动Safari浏览器中该应用程序根本不起作用！ 基本上，我的点击事件都没有发射。 最重要的是，我的控制台中出现了不一致的错误消息，这些消息在任何其他浏览器中都没有显示出来。

TypeError: 'null' is not an object 

围绕这个网站，我看到有关jQuery绑定工作和Mobile Safari的报告有冲突，哪些不支持。 所以我决定build立我自己的实验。

使用单个链接创build页面：

 <a class="mylink">CLICK ME</a> 

然后我尝试了这些绑定中的每一个：

 $("a.mylink").click(function () { console.log("click worked"); }); $("a.mylink").bind("click", function () { console.log("bind worked"); }); $("a.mylink").live("click", function () { console.log("live worked"); }); $("a.mylink").on("click", function () { console.log("on worked"); }); 

唯一一个在控制台中得到任何响应的是.live（）。 即使如此，这是非常不一致的，通常涉及点击发送垃圾邮件。

如果我编辑我的链接，并像这样添加一个onclick属性：

 <a onclick="function(){}" class="mylink">CLICK ME</a> 

然后.live（）工作一致，但没有其他绑定仍然。 这似乎是疯了，因为这么多的应用程序在移动Safari上运行就好了。 有什么明显的我在这里失踪？

请注意，我知道如何使用jQuery之前，任何人都问，我的绑定是在$（document）.ready（）。
此外，我知道链接工作得很好，一旦一个href附加到他们，但显然不是我所需要的，因为这是一个单页导航应用程序，附加一个href似乎忽略任何绑定完全在iOS中，并导致完整页面导航。

Answer 1

你必须添加一个href="#"或者把cursor:pointer被点击的元素。

这是一个testing（在iPad 3中）： http : //jsfiddle.net/dZqyU/2/

 <a class="clickable">I have no href :( (I dont work in iPad)</a> <br/> <br/> <a class="clickable" href="#">I have href :) (I work in iPad)</a> <br/> <br/> <a class="clickable cursor">I have cursor, no href :) (I work in iPad)</a> 

---

 $(document).on('click','.clickable',function(){ alert($(this).text() + 'and the binding worked :)'); }); 

---

 .cursor{ cursor:pointer; } 

---

我猜这个问题就像a没有href属性a锚标签，在某些iOS Safari版本中没有被识别为可点击的元素。 但是，如果我们明确地通过添加href或者添加一个游标pointer来使它们可以clickable ， 这是一个相关的链接 。

Answer 2

以前的答案是不正确的。 我testing了一下，并且能够实现你正在尝试实现的内容，而不使用内联JavaScript，只使用绑定在iPhone上。 我的猜测是你在某个地方有些小错字，而且由于jQuery的优雅降级能力，所以没有任何错误被调用。

有一件事你可以尝试，假设我所说的错误是不正确的，就是将href =“＃”添加到你的锚点，然后使用event.preventDefault（）[你也可能需要添加event.stopImmediatePropagation （）]到您的代码。

您的代码中可能存在一个错误（可能在某处完全不同，并且不相关），桌面Safari很适合为您find并忽略或修复，但移动Safari对我的体验要求不那么宽容。