Reload function after AJAX fires several times

Question

In WordPress Woocommerce the shopping cart gets refresh with AJAX and I'm using a script to implement <b>+/-</b> Buttons to the quantity-field. <br><br>

After the reload of the cart with AJAX the function has no effect on the cart anymore because the elements are reloaded. <br><br>

To prevent this I was using ajaxComplete as trigger to reload the function but when doing this and I click on the + button the input field gets increment by 5 times. <br> <br>

Debugging with an alert shows me the increment gets fired 5 times by +1 and not adding 5 directly.

Maybe you can see the issue:

jQuery(document).on("ready ajaxComplete",function($){ 

    function quantityPlusMinus() {

        function releaseUpdateCartButton() {
            if (jQuery( "input[name='update_cart']" ).length) {
                if (jQuery( "input[name='update_cart']" ).is(':disabled')) {
                    jQuery( "input[name='update_cart']" ).prop("disabled", false); 
                }
            }
        }

        jQuery('div.quantity').on( 'click', '.plus, .minus', function() {
            var qty = jQuery( this ).closest( 'div.quantity' ).find( '.qty' );
            var val   = parseFloat(qty.val());
            var max = parseFloat(qty.attr( 'max' ));
            var min = parseFloat(qty.attr( 'min' ));
            var step = parseFloat(qty.attr( 'step' ));

            // Change the value if plus or minus
            if ( jQuery( this ).is( '.plus' ) ) {
               if ( max && ( max <= val ) ) {
                  qty.val( max ).change();
               } else {
                  qty.val( val + step ).change();
                  releaseUpdateCartButton();
               }
            } else {
                if ( min && ( min >= val ) ) {
                    qty.val( min ).change();
                } else if ( val > 1 ) {
                    qty.val( val - step ).change();
                    releaseUpdateCartButton();
                }
            }
        });
    }
    quantityPlusMinus();
});

Answer 1

Got it to run. I dont know if there is a smarter way to do it but it works.

If Someone else looking for a solution:

function inputPlusMinus(ftype) {

    // Release the UpdateCartButton when click on +/- button in cart
    function releaseUpdateCartButton() {
        if (jQuery( "input[name='update_cart']" ).length) {
            if (jQuery( "input[name='update_cart']" ).is(':disabled')) {
                jQuery( "input[name='update_cart']" ).prop("disabled", false); 
            }
        }
    }

    // Check which type of function is needed, for all or just for cart
    if ( ftype == 'cart') {
        var where = '.woocommerce-cart-form div.quantity';
    }
    else {
        var where = 'div.quantity';
    }
    // Action if button is clicked
    jQuery(where).on( 'click', '.plus, .minus', function() {
        var qty = jQuery( this ).closest( 'div.quantity' ).find( '.qty' );
        var val   = parseFloat(qty.val());
        var max = parseFloat(qty.attr( 'max' ));
        var min = parseFloat(qty.attr( 'min' ));
        var step = parseFloat(qty.attr( 'step' ));

        // Change the value if plus or minus
        if ( jQuery( this ).is( '.plus' ) ) {
           if ( max && ( max <= val ) ) {
              qty.val( max ).change();
           } else {
              qty.val( val + step ).change();
              releaseUpdateCartButton();
           }
        } else {
            if ( min && ( min >= val ) ) {
                qty.val( min ).change();
            } else if ( val > 1 ) {
                qty.val( val - step ).change();
                releaseUpdateCartButton();
            }
        }
    });
}        

// Run function when page loading    
jQuery(document).on("ready",function($){ 
    inputPlusMinus();
});
// When cart is reloaded add new functionality to cart inputs
jQuery(document).on("updated_cart_totals",function($){ 
    inputPlusMinus('cart');
});