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);
    });
  });

Topic woocommerce-offtopic ajax events jquery Wordpress

Category Web

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.