Geek Answers Handbook

JQuery click handler not invoked on iPad

I have a project using jQuery and a lot of dynamically generated content. There is a click handler on the upper left element - the “initiative” rating - and it works fine on the Safari desktop, but not called on Mobile Safari at all; a gray overlay never appears and no action is taken. This is the same story with a click handler on the Hit Points area (172 on the right) and status ("Add status effect" at the bottom, confirm, appears above the portrait): everything works on the desktop, but not on mobile Safari.

I reduced the code to the following:

 <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script> $(function() { $('#dynamic').click(function() {alert("works")}); $('#dynamic-with-onclick').click(function() {alert("works")}); $('#dynamic-with-dynamic-onclick').click(function() {alert("works")}).attr('onclick', ''); }) </script> </head> <body> <ul> <li id='static' onclick='alert("works")'>If there an onclick it called</li> <li id='dynamic'>And if there no onclick the iPad won't see other click events</li> <li id='dynamic-with-onclick' onclick=''>But if there is one all events are called</li> <li id='dynamic-with-dynamic-onclick'>And if we add one everything works</li> </ul> </body> </html>

Update

It seems a lot easier than when I initially asked this question 10 months ago; Using modern Mobile Safari, all click handlers will be registered as usual. So go ahead and just use $(...).click(function() {}) !

+7
source share
2 answers

We could do a hacker thing and just add onclick to everything we want to click. But the “right” way to do this seems to use the event corresponding to the iPad:

 var hitEvent = 'ontouchstart' in document.documentElement ? 'touchstart' : 'click'; $('#dynamic').bind(hitEvent, function() {alert("works")}); $('#dynamic-with-onclick').bind(hitEvent, function() {alert("works")}); $('#dynamic-with-dynamic-onclick').bind(hitEvent, function() {alert("works")}).attr('onclick', '');

Another way to do this is to bind to several events and be content with what is triggered.

I am currently using the first solution; I can try another one, because I think it is cleaner.

+8
source

Late to answer now, but for others looking for a solution, here is the answer:

iPad has a different behavior for non-anchor click events. It recognizes its first click event as a hang.

The solution I found for this is

either adds the onclick = "attribute to this element, or

"cursor: pointer" css property.

Any of this solution will tell the iPad that this element is an interactive area.

(via http://swsharinginfo.blogspot.in/2013/03/solution-for-click-event-issue-on-ipad.html )

+4
source

More articles:


All Articles