Jquery touchstart not working on document

Question

a simple touchstart event will work if you use this syntax: http://jsfiddle.net/rwdu4hb9/

$(function(){ $('.test').on('touchstart', function(){ alert("Clicked"); }); }); 

But if you want to add your event for all incoming elements with $(document).on(..) , like here: http://jsfiddle.net/rwdu4hb9/1/

 $(function(){ $(document).on('touchstart', '.test', function(){ alert("Clicked"); }); }); 

The event will not be fired. What is wrong with this challenge?

Tested on iPad with iOS 8.0.2

Answer 1

Out of curiosity, is there any reason you avoid using the click event instead of touchstart ? Typically, mobile browsers will handle click as the "touch" event. In the past, I had problems with touching clicks on different devices (solved by w / modernizr)

At least I would bind both events ( click and touchstart ) that will process both mobile and desktop (update your script - http://jsfiddle.net/srdkgL7o/ )

 $(function(){ $(document).on('touchstart click', '.test', function(e){ e.stopPropagation(); //stops 'ghost clicks' (double clicking) alert("Clicked"); }); });