jQuery on() method not working on element with dynamically added class

Question

I'm adding an active class to a link once a product is added to cart. I'm then trying to use that active class to further determine the function of the link. However, the on() click event on the link doesn't fire, only once the page has been reloaded.

This is the code where the class is added

  Shopify.addItemFromForm(this.productForm, function (cartItem) {
    return setTimeout(function () {
      if (theme.isHome && jquery_default()('.add-to-cart', _this3.$el).hasClass('express')) {
        window.location.href = '/checkout';
      } else {
        Shopify.getCart(function (cart) {
          return jquery_default()('.cart-link .cart-count').text(cart.item_count);
                });

        var successMessage = _this3.productSettings.successMessage.replace('** product **', cartItem.title);
                    jquery_default()('.product-form-submit-wrap').css('display','none');
                    jquery_default()('.product-quantity-increment').addClass('qty-button-active');

                    Shopify.getCart(function (cartCurrent) {
                        jquery_default().each(cartCurrent.items, function(index, currentItem) {
                            if (cartItem.title == currentItem.title) {
                                return jquery_default()('.in-cart-message .cart-quantity').text(currentItem.quantity+' in basket');
                            }
                        });
                });


        jquery_default()('input[name="quantity"]', _this3.$el).removeClass('error');
        jquery_default()('.add-to-cart', _this3.$el).removeClass('loading');

        _this3.$productMessage.removeClass('error').addClass('success').html(successMessage);

        if (!Modernizr.cssanimations) {
          _this3.$addToCartButton.val(_this3.productSettings.addToCartText);
        }
      }

      _this3.processing = false;
    }, 1000);
  });

And the click event is something like this

 jquery_default()('.qty-button-active').on('click', function(event){
     alert('test');
 });

Since I'm using the on() method I feel like this should pick up the newly added class, any ideas what I'm missing?

Answer 1

I may be wrong. But the listener you added only affects the existing DOM. So new changes won't have a listener. You can tackle this problem by adding a listener to the element static parent instead.

jquery_default()('parent').on('click','.qty-button-active', function(event){
     alert('test');
 });