I've been tasked with converting jQuery to vanilla JS. I've run into trouble figuring out the proper way to convert the selector argument in an .on() event handler.
.on( events [, selector ] [, data ], handler )
I'm at a lost as to how the selector argument in .on() actually works and what I need to do to properly replicate it.
Here is the jQuery that I am trying to convert:
// jQuery I'm converting from
$('body').on('touchstart', '#chatListDisplay .chatEl', () => { ... });
I've tried just including the selector argument the element that is used in the original jQuery by passing it into querySelectorAll().
// My attempt at vanilla
var chatEls = document.querySelectorAll('body #chatListDisplay .chatEl');
chatEls.forEach((el) => {
el.addEventListener('touchstart', () => { ... });
});
The event handler never fires in this case, so I took some time to think of what my attempt actually represents in jQuery. It probably matches this:
$('body #chatListDisplay .chatEl').on('touchstart', () => { ... });
As expected, changing the original jQuery to the above also results in the event handler not firing.
