Mobile Safari and jQuery events, nothing is firing?

Question

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.

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.

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

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"); });

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.

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

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

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?

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.

Answer 1

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

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

---

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.