AJAX 刷新后按钮不起作用的 Woocommerce 数量增量，并且自动加载仅在点击 2 次后触发

Question

我真的对这个话题感到疯狂。很多人提供了解决方案，但没有一个真正适合我。我的场景可能适合很多人：

我自定义了 WooCommerce 数量输入 (/global/quantity-input.php) 并添加<input>以增加或减少数量字段中的金额：

<div class="quantity">
    <input class="step-btn minus" type="button" value="-">
    <input type="number" step="<?php echo esc_attr( $step ); ?>" min="<?php echo esc_attr( $min_value ); ?>" max="<?php echo esc_attr( 0 < $max_value ? $max_value : '' ); ?>" name="<?php echo esc_attr( $input_name ); ?>" value="<?php echo esc_attr( $input_value ); ?>" title="<?php echo esc_attr_x( 'Qty', 'Product quantity input tooltip', 'woocommerce' ) ?>" class="input-text qty text" size="4" pattern="<?php echo esc_attr( $pattern ); ?>" inputmode="<?php echo esc_attr( $inputmode ); ?>" />
    <input class="step-btn plus" type="button" value="+">
</div>

我使用从我的加载的 jQuery functions.php：

jQuery(document).ready(function($){
     $('.quantity .step-btn.plus').on('click', function() {
         $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 .step-btn.minus').on('click', function() {
         $input = $(this).next('input.qty');
         var val = parseInt($input.val());
         var step = $input.attr('step');
         step = 'undefined' !== typeof(step) ? parseInt(step) : 1;
         if (val > 1) {
             $input.val( val - step ).change();
         }
     });
});

现在，在购物车页面上，我正在使用这个小的 jQuery 片段，它也是从functions.php 加载的，以便在更改数量后自动重新加载 AJAX：

jQuery('div.woocommerce').on('click', '.qty, .plus, .minus', function(){
    jQuery('[name="update_cart"]').removeAttr('disabled');
});
jQuery('div.woocommerce').on('change', '.qty, .plus, .minus', function(){
    jQuery('[name="update_cart"]').trigger('click');
});

现在我的问题：

1. AJAX 仅在单击两次plus或/和后才会重新加载minus。
2. AJAX 重新加载后，按钮不再增加或减少。

在这里得到一些支持真是太棒了！:)

Answer 1

第一个问题：

AJAX 仅在单击两次plus或/和后才会重新加载minus。

这里的问题是，我试图触发同一个对象两次。它首先执行disable，然后刷新，因为我有两个不同的 jQuery 函数来完成基本相同的事情。

第二个问题是 JS 和 Ajax 的普遍问题，它从根本上杀死了功能。对我有用的是重新加载update_cart操作并重新初始化函数。请参阅下面的完整代码，经过测试并正常工作。我还添加了一个小的超时，以便call每次点击时不使用 AJAX：

function enable_update_cart() {
    $('[name="update_cart"]').removeAttr('disabled');
}

function quantity_step_btn() {
    var timeoutPlus;
    $('.quantity .step-btn.plus').one().on('click', function() {
        $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();

        if( timeoutPlus != undefined ) {
            clearTimeout(timeoutPlus)
        }
        timeoutPlus = setTimeout(function(){
            $('[name="update_cart"]').trigger('click');
        }, 1000);
    });

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

        if( timeoutMinus != undefined ) {
            clearTimeout(timeoutMinus)
        }
        timeoutMinus = setTimeout(function(){
            $('[name="update_cart"]').trigger('click');
        }, 1000);
    });

    var timeoutInput;
    jQuery('div.woocommerce').on('change', '.qty', function(){
        if( timeoutInput != undefined ) {
            clearTimeout(timeoutInput)
        }
        timeoutInput = setTimeout(function(){
            $('[name="update_cart"]').trigger('click');
        }, 1000);
    });
}

$(document).ready(function() {
    enable_update_cart();
    quantity_step_btn();
});

jQuery( document ).on( 'updated_cart_totals', function() {
    enable_update_cart();
    quantity_step_btn();
});

没woocommerce/global/quantity-input.php碰过！

享受