I have a web app where I use the jQuery .live() method to attach a click event handler to a table td element (to convert it into a input field when the user clicks the table cell and then post the input using ajax.) Everything worked properly on all the mainstream browsers (Firefox, Safari, Chrome) but nothing happened when I tapped the table cell when viewing the app on my iPad. Some Googling led me to this blog post:
jQuery’s live click handler on mobile Safari
This guy discovered that the .live() click event will fire on Mobile Safari (i.e. iPad, iPod Touch, iPhone) when it is attached to certain elements (like an anchor tag), but for some other elements it will only fire if you add onclick="" to the element tag.
I added onclick="" to my td tag for my table cell and voila, tapping on the table cell works now to convert it to an input field like it should.
2010-11-06
Workaround for jQuery .live() event handler not working on Mobile Safari, iPad, iPod Touch, iPhone
Subscribe to:
Post Comments (Atom)
16 comments:
Thank you very much for this. I spent a day of work trying to figure this out and this worked perfectly!
Great, thanks!!
I can't believe Apple missed this little anomaly. I can understand a lot of things, but with the prevalence of jQuery these days, it seems hard to believe someone, somehwere at Apple did not take the time to hop on to the internet and test a few websites? I am sure they did, so how did they miss this bad behaviour?
When something only fails in one system but works well in all others then I think it is pretty safe to assume the problem is in the single system that failed.
Well, enough ranting.
Thanks for this! I was heading down this road but you saved me tons of time not having to re-invent the wheel! Cheers!
Thank you very much for this hint. This glitch gave me headaches.
I'd like to know what's causing this strange bug... or maybe not. ;)
Gosh darn it I love the internet.
thanks for this. it helped a lot.
Thanks for your post, its realy work for me as hack. But jQuery need to fix it in upcoming version
Was this live() event handler called on static elements, or on elements later on? I wrote a small mobile web app using JQuery/JQTouch. The app creates a list on the fly with JSON data returned, and allows the user to drill down the list to a details screen. Works great on my PC with all browsers (except IE struggling with JSON) and on Android mobile phone using FireFox, but not with WebKit, neither with IPhone/Safari. I can see the event handler is not called, as screen is not updated. The event IS added to an anchor in a list (ul li a). Note the app event handler is called when using 'static' elements, but as my list is teh result of a search, I ahve to build it up.
I have only used this work around with "static" elements (i.e. elements generated by the server using PHP). Do you add the onclick="" to your dynamically created elements?
Thank you so much!
Thank you for this!!! It really works - as simple as that :)
thanks Andy. You've save my day
Thanks Andy. You've save my day
thanks! works great and also preserves scrolling.
binding to touchstart / touchend events will kill scrolling
Great post!
I was facing similar issue but for dynamic elements and found that we can use either onclick="" or "cursor:pointer" and I tried both of them one by one and both were able to solve this issue.
(via http://swsharinginfo.blogspot.in/2013/03/solution-for-click-event-issue-on-ipad.html)
Great post!
I was facing similar issue but for dynamic elements and found that we can use either onclick="" or "cursor:pointer" and I tried both of them one by one and both were able to solve this issue.
(via http://swsharinginfo.blogspot.in/2013/03/solution-for-click-event-issue-on-ipad.html)
Post a Comment