When I try to implement the below code:

$('.touchelement').bind({'touchstart':function(e){
    console.info(e.touches.item(0));
}});

It shows the output as undefined. Not only in touchstart, but for every other event like (touchmove, touchend) it shows the same result.

Is there is any alternate way to bind the touchstart event using jQuery.

When I try to implement the below code:

$('.touchelement').bind({'touchstart':function(e){
    console.info(e.touches.item(0));
}});

It shows the output as undefined. Not only in touchstart, but for every other event like (touchmove, touchend) it shows the same result.

Is there is any alternate way to bind the touchstart event using jQuery.

• javascript
• jquery
• ios
• jquery-events

2 Answers 2

jQuery does some processing on event objects to make them consistent across browsers, but it doesn't know about the touches array so this isn't copied to the new event object. So, you need to access it through the original event object which is event.originalEvent.

$('.touchelement').bind({'touchstart':function(e){
  console.info(e.originalEvent.touches[0]);
}});

Should it not look more like this?

$('.touchelement').bind('touchstart', function(e){
  console.info(e.touches);
});