v1.0a4 Broken Click Events on iPhone 4.2 + PhoneGap

[cmsfruit]

Today I downloaded and tried to use the new jquery mobile v1.0a4 and the click events are now broken on the new version. It worked fine with v1.0a3. When you click on the back button in the header running iPhone Simulator v4.2, after a few clicks it starts acting up and double clicking everything, not only the back button but other buttons on the page as well. Other than that, everything else is working beautiful! Thank you for your hard work on the new version, the page transitions are much faster and the whole browsing experience is way better... thank you!

[toddparker]

First off, thanks for the encouragement! Do you have an iOS device to test this on because the emulator doesn't match the iPhone or iPad exactly and I can see events would be especially suspect.

In any case, can you try to post a detailed set of steps to reproduce the problem here? I'll then try to reproduce on our iPhone or iPad.

[cmsfruit]

Hi Todd,

Thank you for the quick response! I just tried deploying v1.0a4 to my actual iphone device and it is indeed acting the same way on the device when run as a native app. You can reproduce the issue by setting up a iphone project using phonegap and xcode and then deploying the new jquery mobile alpha 4 and then run the xcode iphone simulator. Create several text html pages that contain list view items and also pages that contain the header back button and click any of the list items and back button a few times and you will see it start to malfunction.

I'm not sure if you want me to include another issue on another thread, but list item links also broke on the new alpha 4. It may be related to the issue above, because it seems that all click events are causing problems with the new alpha 4, but basically list items are losing their link (ability to click through).

If you deply a test iphone app using the xcode simulator I'm sure you will immediately notice the issues after clicking some list items and back button several times.

It also seems the click event fires twice after a few normal clicks. For example, if you click the back button a few times, then it starts double clicking the back button causing it to fire the click event twice.

I can test further if you need me to.

Thank you! John

[toddparker]

Thanks for the details. So just to be clear, you're only seeing issues with clicks not working when you wrap the code in PhoneGap? If you open the same code in the browser as a normal web app, is it ok?

We are using the new virtual click event system in A4 which could be causing these issues. Are you attaching events to these buttons and lists or just using the default JQM behavior with these links pointing to pages in your app? If there are custom events in there, you might need to update your code a bit to adapt to the virtual click code.

[cmsfruit]

That's correct, the issues only occur when launching in iPhone simulator or actual iPhone device... they are not occurring when I open the same page in Firefox.

The links that are not working in list items are formatted like this:

<li> <a href="javascript: doSomeJSFunction();">My Menu Link</a> </li>

Just to clarify, click events (click events are fired twice), and also linked menu items like the example above are not working in a4. It recognizes the list item is a link but it won't do what it's suppose to do when clicked.

This same iphone app I am testing worked fine in a3.

[scottjehl]

Temporary workaround you can try: add a script after jQuery.js that sets $.ajaxSetup({dataType:"html"});

We'll try and drop a hotfix in soon if that works. Thanks

[cmsfruit]

Will using that work around cause a problem with the other ajax in my app that is using dataType json? My app uses alot of ajax and they are all json datatype.

[scottjehl]

In your case, that'll probably be too intrusive. Ideally, you'll want to set the dataType to HTML solely on the requests the framework makes internally. This commit shows the change you'd need to make to our source. https://github.com/jquery/jquery-mobile/commit/8cd0d2c6790f55718eb95cf428a3cd6f64c58d23

If you're not using the CDN, you should be able to get this fix in very easily. Just clone our repo and run make to generate the fixed JS file.

[jblas]

I checked in a fix for the "double click" problem that basically rolls us back to firing off page loads and transitions on the "click" event.

https://github.com/jquery/jquery-mobile/commit/d43bbfc52afc9c03284293db1053cc6abc5f557f

In a nutshell, the delay between the touchend event, which fires off the "vclick" event and the synthesized "click" event is determined by how long you keep your finger down during the tap. If you tap quickly the browser (iOS) seems to fire off a 300 sec timer, which when fired results in the synthesized mouse events (including click). If your tap is a slow casual one, some interval between touchstart and touched is exceeded so the mouse events are fired immediately after the touchend.

I mention this because it explains why folks sometimes see a "double tap" and sometimes don't. One thing to point out here is that the target of the mouse events isn't determined until the time they are actually synthesized. So in our case the "vclick" (touched) triggers a page load and transition, and they both finish before the mouse click is ever synthesized … so when the browser fires the click event, the back button from the new page is the target of the click so it triggers that.

Prior to us shipping alpha 4, we noticed that 3rd party markup with click handlers on the page were broken … an example of this was the ui-datepicker in the experiments directory. I made the mistake of trying to fix this at the last minute by allowing the synthesized "click" event to happen from our global live("a") click handler, and then registering a real "click" handler that actually did the preventDefault and stopPropagation. Of course this opened the door for the situation I mentioned above to happen. I of course didn't notice it because I tap slow. :-) And apparently so did the other guys that helped me test it … it is very noticeable in the emulator, which we try not to rely on because the performance on an emulator is quite different than the actual device.

Anyways, apologies to all for busting things. Like I said we rolled back to firing page loading and transitioning on "click" since that is the only reliable way to prevent this situation from happening. Unfortunately what this means is that you will get immediate feedback while tapping on listview items and links, but there may be a slight delay while we wait for the browser to actually trigger the click event.

[cmsfruit]

Thank you so much for your thorough analysis and hard work! Me and the jqm community greatly appreciate the great work you guys are doing :-)

Does your fix also fix the issue with list items not being clickable/tappable? Well the GUI shows the list item as a clickable item, but when you actually click the item, no action happens... has this also been fixed with this commit?

I will be testing the latest source in github in the next few days to see how things are working with this fix... I will get back to you with the results.

Thanks again! John

[cmsfruit]

Why wait a few days... I was able to test the latest source for JQM on iPhone and I can confirm that indeed the double click issue has been resolved... the only other thing I noticed didn't work anymore was the onclick event for a input type="checkbox" element. Let's say I have a custom onchange function on a checkbox like the following:

<input type="checkbox" name="my_checkbox" onchange="javascript: doSomething();" />

it never fires the custom onchange event.

[toddparker]

Great. Can you create this as a new issue so we can track it?

[cmsfruit]

Yes, absolutely. Sorry :-)

[cmsfruit]

actually, I just noticed someone else has already opened an issue for the checkbox onchange event here:

https://github.com/jquery/jquery-mobile/issues#issue/1328

[toddparker]

Cool. Thanks for looking for dupes - you saved me a lot of work!

[cmsfruit]

My pleasure :-) That's the least I could do since I'm the one who caused the dup ;-) I love the work you guys do, keep up the great work!

[wootwoot1234]

I'm still seeing this issue. I'm using the nightly build from today and when clicking it seems to fire twice. It doesn't happen in chrome on my desktop but when I run it on my iPod Touch I get the two clicks issue.

[wootwoot1234]

If I use the .bind("tap",... or .bind("vclick" it fires twice but if I use .bind("click",.. it seems to fix the double tap issue but it seems to slow down the responsiveness.

Which one should I be using (click, tap or vclick)?