WooCommerce event works in jQuery but not in JavaScript
I'm using WooCommerce hook added_to_cart which works perfectly in jQuery, but doesn't work in vanilla Javascript. Both functions are running on document loaded. Here is my code reference:
JavaScript
ajaxAddToCart: function () {
document.body.addEventListener(click, function (e) {
if (!e.target.classList.contains(add_to_cart_button)) return;
// This event doesn't work
document.body.addEventListener(added_to_cart, function () {
console.log(added);
setTimeout(function () {
added.classList.add(button);
added.innerHTML = `span class=text${wc_cart_fragments_params.i18n_view_cart}/span
span class=iconcheck/span`;
}, 100);
});
});
},
jQuery
$(document).on(click, .add_to_cart_button, function (e) {
// This event works
$(body).on(added_to_cart, function () {
console.log(added);
setTimeout(function () {
_this.next(.added_to_cart).addClass(button);
_this.next(.added_to_cart).html('span class=text/spanspan class=iconCheck/span');
}, 100);
});
});