Using jGestures with jQuery "on" events

Question

I have a number of dynamically-generated divs that need to be tapped. For mouse-oriented devices, I usually do this:

$("#wrap").on("click", 'div', function() { console.log("clicked!"); });

I have noticed a major sensitivity speed-up on mobiles when using jGestures custom events, which work perfectly when used this way:

$("#wrap").bind('tapone', function() { console.log("tapped!"); });

However, I cannot use tapone with the jQuery .on events like this:

$("#wrap").on("tapone", 'div', function() { console.log("tapped!"); });

Does anyone know a way of getting around this problem?

Answer 1

Build your own delegation, if you had this:

$("#wrap").on('click', '#myID', function() { console.log("clicked!"); });

All it really does is:

$("#wrap").on('click', function(e) { 
    if ( e.target.id == 'myID' )
        console.log("clicked!"); 
});

So for your custom events you could do:

$("#wrap").on("tapone", function(e) {
    if ( e.target.tagName.toLowerCase() == 'div' )
        console.log("tapped!"); 
});

FIDDLE