javascript - touch events event delegation with jquery's .on() -

so have javascript code listens touch events on elements in document.

document.addeventlistener("touchstart", touchhandler, true); document.addeventlistener("touchmove", touchhandler, true); document.addeventlistener("touchend", touchhandler, true); document.addeventlistener("touchcancel", touchhandler, true); 

that works fine except want listen events on items of class of datacard (.datacard) , of children not anchors <a>.

so how thought fix through creating jquery selector, using jquery earlier in page, , calling .addeventlistener() on that. didn't work.

this tried:

$('.datacard, .datacard *:not(a)').addeventlistener("touchstart", touchhandler, true); $('.datacard, .datacard *:not(a)').addeventlistener("touchmove", touchhandler, true); $('.datacard, .datacard *:not(a)').addeventlistener("touchend", touchhandler, true); $('.datacard, .datacard *:not(a)').addeventlistener("touchcancel", touchhandler, true); 

as mentioned before didn't work. guess because jquery , js don't mix @ times.

now, realised need delegate events instances of .datacard ( exist or may programmatically created ).

this thing because use entire jquery solution .on() function.

this tried:

$('#main').on('touchstart', '.datacard', function(event){     touchhandler(event); }); $('#main').on('touchmove', '.datacard', function(event){ touchhandler(event); }); $('#main').on('touchend', '.datacard', function(event){ touchhandler(event); }); $('#main').on('touchcancel', '.datacard', function(event){ touchhandler(event); }); 

now, #main stable , exist , .datacards exist , programmatically added.

so in terms of event-delegation, works fine. problem not working either.

i think because touchstart, touchmove, touchend, , touchcancel not jquery events on can recognise.

so question is, how can first block of code (add event listeners touch events) instances of .datacard, exist , programmatically created, in jquery or plain / vanilla js?

you can use event target property , test if instance of .datacard:

$('#main').on('touchstart touchmove touchend touchcancel', '.datacard', function(event){     if($(event.target).is('.datacard')) {         touchhandler(event);     } }); 

working demo added click handler well, can test in desktop browser.

as aside, can register multiple event listeners same handler providing space-delimited list first parameter of on().