Geek asks and answers

Safari and jQuery mobile events, nothing shoots?

So, I have an application written in HTML5 / JavaScript for an embedded device. This is a one-page application with fragments loaded in a div on the main page in response to various events.

I was asked to transfer it to a browser so that it could be used for marketing, presentations, etc.

This did not seem to be a big problem, since it was very small for adaptation, it was just necessary to configure CSS so that it displayed the same in all browsers. Then they decided that the device on which they wanted to launch the webapp would be an iPad.

The application did a great job in Safari, so I didn’t think that I would have problems with Mobile Safari. I immediately realized that this is not so. The app does not work at all in Mobile Safari! Basically, none of my click events fire. In addition, I get inconsistent error messages in my console that are not displayed in any other browser.

TypeError: 'null' is not an object

Moving around this site, I see conflicting messages about which jQuery bindings work and Mobile Safari and which don't. So I decided to create my own experiment.

Creating a page with one link:

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

Then I 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 I got a response to in the console was: .live (). And even then it was very inconsistent and usually included click spam.

If I edit the link and add the onclick attribute as follows:

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

.live() , . , Mobile Safari . - , ?

, , jQuery, - , , $(document).ready().
, , , href, , , , href, , iOS .

+5
2

href="#", cursor:pointer , .

( 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 , , Safari iOS. clickable, href pointer, . .

+9

, , . , javascript, iPhone. , - , - jQuery, , , .

, , , , , , , href= "#" , event.preventDefault() [ event.stopImmediatePropagation()] .

, (, - ), Safari , , , .

+1

More articles:


All Articles