Question

我将此（global / quantity-input.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 ); ?>" min="<?php echo esc_attr( $min_value ); ?>" max="<?php echo esc_attr( $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" />
  <input class="plus" type="button" value="+">
</div>

这个jquery代码也进入了我的js文件。

<script type="text/javascript">
    jQuery(document).ready(function($){
        $('.quantity').on('click', '.plus', function(e) {
            $input = $(this).prev('input.qty');
            var val = parseInt($input.val());
            $input.val( val+1 ).change();
        });

        $('.quantity').on('click', '.minus', 
            function(e) {
            $input = $(this).next('input.qty');
            var val = parseInt($input.val());
            if (val > 0) {
                $input.val( val-1 ).change();
            } 
        });
    });
    </script>

它工作正常，但问题是当我更新购物车页面上的任何产品时，它不再起作用了。有什么解决方案吗？如果我做错了，请纠正我？
谢谢

Answer 1

你的第一部分是正确的。加载页面时，您的代码将起作用。但除此之外，您还需要为AJAX调用添加一个事件。

我还添加了.off（），因此在每次调用AJAX之后，该值不会多次添加。

<script type="text/javascript">

jQuery(document).ajaxComplete(function(){
    jQuery('.quantity').off('click', '.plus').on('click', '.plus', function(e) {        
        $input = jQuery(this).prev('input.qty');
        var val = parseInt($input.val());
        $input.val( val+1 ).change();
    });



        jQuery('.quantity').off('click', '.minus').on('click', '.minus',
        function(e) {       
        $input = jQuery(this).next('input.qty');
        var val = parseInt($input.val());
        if (val > 1) {
            $input.val( val-1 ).change();
        }
    });
});

</script>

woocommerce加号和减号按钮不适用于ajax更新

1 个答案: