jQuery live() removing iPhone touch event attributes?

Question

I am binding live events on links in my PhoneGap app. The event does fire successfully (confirmed by alert()ing), but it seems any touch data is not attached to the event object like it should be. This happens on all touch events - touchstart, touchmove, and touchend.

$('a').live('touchend', function(event) {
  event.preventDefault();
  alert(event.touches.length); // event.touches should be populated!
});

Any ideas? Am I SOL with jQuery.live()?

Answer 1

The touch events are not currently supported by Events/live.

From the documentation:

Possible event values: click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup

Currently not supported: blur, focus, mouseenter, mouseleave, change, submit

You might want to consider trying to use click if that will suit your needs, or you can switch to using livequery, which probably will support it. (livequery is what live was originally based on, I'm not sure why it doesn't support all of the same events)

Answer 2

Actually, you can use the .live method. You don't have the event.touches property because of how jQuery handles events internally. In order to "fix" events, jQuery clones the event. In doing so, it only copies over a limited number of properties for performance reasons. However, you can still access the original event object via the event.originalEvent property.

So your example code would need to look like the following:

$('a').live('touchend', function(event) {
  event.preventDefault();
  console.log(event.originalEvent.touches.length);
});

Here are the properties that are copied over: http://github.com/jquery/jquery/blob/master/src/event.js#L411