移动Safari和jQuery事件，什么都没有解雇？ [英] Mobile Safari and jQuery events, nothing is firing?

问题描述

好的，所以我有一个用HTML5 / JavaScript编写的应用程序用于内置式车载单元。它是一个单页应用程序，在主页面上将片段加载到div中以响应不同的事件。

Okay so I have an app written in HTML5/JavaScript for an in-dash car unit. It is a 'single-page' app with fragments loaded into divs on the main page in response to different events.

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

I've been asked to port it to the browser so that it can be used for marketing, presentations, whatever.

这似乎没什么大不了的，因为很少有人适应，只需调整一些CSS就可以在所有浏览器中显示相同的内容。然后，他们决定他们想要运行webapp的设备就是iPad。

This didn't seem like a big deal since there was very little to adapt, just needed to adjust some CSS so that it could be displayed the same across all browsers. Then, they decided that the device they wanted to run the webapp on would be an iPad.

该应用程序在Safari中运行良好，所以我认为我没有Mobile Safari的任何问题。马上意识到事实并非如此。该应用程序在Mobile Safari中完全不起作用！基本上，我的点击事件都没有被触发。最重要的是，我在我的控制台中收到的错误消息不一致，并且没有显示在任何其他浏览器中。

The app worked great in Safari, so I didn't think I would have any issues with Mobile Safari. Immediately realized that this was not the case. The app doesn't work at all in Mobile Safari! Basically, none of my click events are firing. On top of that, I'm getting inconsistent error messages in my console that don't show up in any other browser.

TypeError: 'null' is not an object

绕过这个网站，我看到有关什么jQuery绑定工作和Mobile Safari，哪些不。所以我决定建立自己的实验。

Going around this site, I'm seeing conflicting reports about what jQuery bindings work and Mobile Safari and which ones don't. So I decided to set up my own experiment.

创建一个包含单个链接的页面：

Creating a page with a single link:

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

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

I then tried each of these bindings:

$("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（）。即便如此，它也非常不一致，并且通常会通过点击来发送垃圾邮件。

The only one that I got any response in the console from was .live(). And even then, it was very inconsistent and usually involved spamming it with clicks.

如果我编辑链接并添加onclick属性，如下所示：

If I edit my link and add an onclick attribute like so:

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

然后.live（）工作正常，但仍然没有其他绑定。这对我来说似乎很疯狂，因为很多应用程序在Mobile Safari上运行就好了。有什么明显的东西我在这里不见了吗？

Then .live() works consistently, but no other bindings still. This seems insane to me since so many apps run on Mobile Safari just fine. Is there something obvious I'm missing here?

注意，我知道如何在任何人问之前使用jQuery，我的绑定是在$（document）.ready（）内部。

此外，我知道一旦href附加到它们之后链接就可以正常工作，但这显然不是我需要的，因为这是一个单页导航应用程序，并且附加一个href似乎完全忽略iOS中的任何绑定并导致完整页面导航。

Note, I know how to use jQuery so before anyone asks, yeas my bindings are inside of $(document).ready().
Also, I know that links work just fine once an href is attached to them, but that's obviously not what I need since this is a single-page navigation app, and attaching an href seems to ignore any bindings completely in iOS and causes a full page navigation.

推荐答案

您必须添加 href =＃或将光标：指针放入要点击的元素。

You either have to add a href="#" or put a cursor:pointer to the element being clicked.

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

Here is a test(in 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;
}

---

我想的问题是像一个没有 href 的锚标签属性并未被某些iOS Safari版本标识为可点击元素。但是如果我们通过添加 href 或添加游标指针明确地使它们可点击 c $ c>它有效。 这是一个相关链接。

---

The issue I guess is like a anchor tag without href attribute is not identified as a clickable element by some iOS Safari versions. But if we explicitly make them clickable by adding href or add a cursor pointer it works. Here is a related link.

这篇关于移动Safari和jQuery事件，什么都没有解雇？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！