Woocommerce plus/minus quantity button changing value but not working actually

Question

I have created a plus/minus quantity button for woocommerce single product page.created a new quantity-input.php

<?php
    if ( ! defined( 'ABSPATH' ) ) 
        exit; // Exit if accessed directly
?>
<div class="quantity">
    <input class="minus" type="button" value="-">
    <input type="number" step="<?php echo esc_attr( $step ); ?>" <?php if ( is_numeric( $min_value ) ) : ?>min="<?php echo esc_attr( $min_value ); ?>"<?php endif; ?> <?php if ( is_numeric( $max_value ) ) : ?>max="<?php echo esc_attr( $max_value ); ?>"<?php endif; ?> name="<?php echo esc_attr( $input_name ); ?>" value="<?php echo esc_attr( $input_value ); ?>" title="<?php _ex( 'Qty', 'Product quantity input tooltip', 'woocommerce' ) ?>" class="input-text qty text" size="4" />
    <input class="plus" type="button" value="+">
</div>

$('.plus').on('click', function(e) {
    var val = parseInt($(this).prev('input').val());
    $(this).prev('input').attr( 'value', val+1 );
});

$('.minus').on('click', function(e) {
    var val = parseInt($(this).next('input').val());
    if (val !== 0) {
        $(this).next('input').val( val-1 );
    } 
});

The above code changes the value of the text visually box but doesn't change the value in the code.As a result, woocommerce doesn't get any changes of quantity.On the other hand if I press up/down button of keyboard, changes of value is being got by woocommerce.I think it is happening because I have used .val() instead of .attr(), I changed to attr() many times but in vain.

Answer 1

Following up on my above comment, this answer explains that jQuery's change event is only triggered by a manual browser event. Therefore, changing the value of an input via jQuery does not trigger the change event so we need to trigger it manually by calling .change() on the input.

Here is my updated fiddle showing the fix outside of the Mix and Match context.

Pertaining to Mix and Match specifically, we just need to chain a .change() event to the input after the value has been changed. I tweaked how the input is identified, but that's not a big difference.

Edit: Now takes into account the input's "step".

$('.quantity').on('click', '.plus', function(e) {
    $input = $(this).prev('input.qty');
    var val = parseInt($input.val());
    var step = $input.attr('step');
    step = 'undefined' !== typeof(step) ? parseInt(step) : 1;
    $input.val( val + step ).change();
});

$('.quantity').on('click', '.minus', 
    function(e) {
    $input = $(this).next('input.qty');
    var val = parseInt($input.val());
    var step = $input.attr('step');
    step = 'undefined' !== typeof(step) ? parseInt(step) : 1;
    if (val > 0) {
        $input.val( val - step ).change();
    } 
});

I'll be adding this to my FAQ soon.