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 coming elements with $(document).on(..) like here: http://jsfiddle.net/rwdu4hb9/1/

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

The event will not get triggered. What is wrong with this call?

Tested on iPad with iOS 8.0.2

Answer 1

Out of curiosity, is there any reason you are avoiding using click event instead of touchstart? Generally mobile browsers will handle click as a 'touch' event. I've had trouble in the past with touches vs. clicks on different devices (solved w/ modernizr)

At the very least, I would bind both events (click and touchstart), which would handle both mobile and desktop (updated your fiddle - http://jsfiddle.net/srdkgL7o/)

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