0

Very simple jQuery doesn't work in Safari for iPhone and iPod touch. I make a simplified case: 

$(function(){
  $("#boto").click(function() {
    $("#boto2").fadeOut("slow");
  });
})

http://jsfiddle.net/vWfNj/

http://www.mig-marketing.com/proves2/3.html

It works in computers, it works in iPad but not in my iPod touch. I'm so surprised, I don't understand. Does jQuery needs anything special for Safari in iPhone?

Nrc
  • 9,577
  • 17
  • 67
  • 114
  • Maybe http://stackoverflow.com/questions/3705937/document-click-not-working-correctly-on-iphone-jquery is related. – toabi Nov 06 '11 at 12:22
  • 1
    Works on your iPad but not your iPod Touch? Surprising, the Webkit engine is exactly the same on both. What iOS version do they run? – Cyrille Nov 06 '11 at 13:03
  • Also, try enabling the console in Preferences > Safari > Developer. You could be able to see an error dropped there that could point you to where it hangs. – Cyrille Nov 06 '11 at 13:06
  • First of all, iOS *does* have a click event. People say that it doesn't all the time and it's silly. Without a click event, half the sites on the web wouldn't work on iPhone. Second, your sample works on iOS 5 on an iPhone. Have you upgraded to iOS5 on your iPod? I can't see why that would make a difference, but you could try. – ThinkingStiff Nov 06 '11 at 15:48

4 Answers4

0

The iphone doesnt have a click event, it has a touch event try this.

$('.class').bind('touchend', function () {
//Code
});

Edit : No idea what your comment means but here....

$(function(){
  $("#boto").bind('touchend', function () {
    $("#boto2").fadeOut("slow");
  });
})
LiamB
  • 18,243
  • 19
  • 75
  • 116
  • I'm not sure if I understand. But I try this and it doesn't work: http://www.mig-marketing.com/proves2/3.1.html – Nrc Nov 06 '11 at 12:42
  • 1
    @Pino - mobile Safari **does** have a [click event](http://developer.apple.com/library/IOS/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html), otherwise it would be a pretty awful experience using it on the web. A touch fires a mousedown, mouseup, then a click, just like a left mouse button. – RobG Nov 06 '11 at 13:23
  • It doesn't work. Perhaps my library is not right?: – Nrc Nov 06 '11 at 13:32
0

Be aware that on iOS 5, your #boto has to be inserted into the DOM before you attach event handlers to it. I had a similar problem a few days ago : jQuery events on iOS 5

Community
  • 1
  • 1
Cyrille
  • 25,014
  • 12
  • 67
  • 90
  • I don't understand. How I insert the div in the DOM? Anyway I tried in a 4.2.1 version and it doesn't work either – Nrc Nov 06 '11 at 12:56
  • `$("
    ").appendTo($(body)).bind("touchend", …)` => do the `appendTo` BEFORE the `bind`.
     – Cyrille Nov 06 '11 at 13:00
  • In your case, your elements are already hard-coded in your HTML file, so as you don't create them on-the-fly, my warning is pointless. They are already in the DOM when your script runs. – Cyrille Nov 06 '11 at 13:02
0

try using .touch instead of .click as a touch event is fired when you click on Any touch supporting device.

Akshay Khandelwal
  • 98
  • 6
0

I found out that the only problem is with the hosted jQuery library from Google. I don't understand why my iPod touch can download the page but not the jQuery library. I don't know if it is a problem in all iPhones and iPod touch...

Anyway If I download the jQuery library, it works fine. And of course the click function works in the iPhone.

NullUserException
  • 83,810
  • 28
  • 209
  • 234
Nrc
  • 9,577
  • 17
  • 67
  • 114