jsでajaxCompleteが2回実行されてしまう

Question

WPのwooccomerceを使っています。
背景として、カートページの商品数量を変更するのに、プラス、マイナスボタンのUIを作り、
それを押す度にカート内がajax更新され、数量が反映されます。しかし僕自身ajaxの知見はほぼなく、woocommerceの仕様で実行されているに過ぎません。

1回目のクリックイベントは問題ないのですが、ajax更新後にそのUIのclickイベントが機能しなくなったので、
「ajaxComplete」を使ったクリックイベントを追記して対処したのですが、なぜかajaxCompleteの中身が2回実行されてしまいます。

以下、「商品の数量変更UI」と「カート更新ボタン」です。
カート更新ボタンはデフォルトで用意されていましたが、

///数量変更UI

<form class="woocommerce-cart-form" action="<?php echo esc_url( wc_get_cart_url() ); ?>" method="post">
	<?php do_action( 'woocommerce_before_cart_table' ); ?>

	<table class="shop_table shop_table_responsive cart woocommerce-cart-form__contents" cellspacing="0">
		<tbody>
			<?php do_action( 'woocommerce_before_cart_contents' ); ?>

<!-- ~~~~~~~~~~~~~~略~~~~~~~~~~~~~~ -->

<!-- 商品の数量変更UI -->
<td class="product-quantity" data-title="<?php esc_attr_e( 'Quantity', 'woocommerce' ); ?>">
	<div class="shop__num">
<!-- マイナスボタン -->
		<div type="button" class="minus shop__num__count cart__count--down">-</div>
		<?php
		if ( $_product->is_sold_individually() ) {
			$product_quantity = sprintf( '1 <input class="qty" type="hidden" name="cart[%s][qty]" value="1" />', $cart_item_key );
		} else {
			$product_quantity = woocommerce_quantity_input(
				array(
					'input_name'   => "cart[{$cart_item_key}][qty]",
					'input_value'  => $cart_item['quantity'],
					'max_value'    => $_product->get_max_purchase_quantity(),
					'min_value'    => '0',
					'product_name' => $_product->get_name(),
				),
				$_product,
				false
			);
		}

		echo apply_filters( 'woocommerce_cart_item_quantity', $product_quantity, $cart_item_key, $cart_item ); // PHPCS: XSS ok.
		?>
<!-- プラスボタン -->
		<div type="button" class="plus shop__num__count cart__count--up">+</div>
	</div>
</td>

<!-- ~~~~~~~~~~~~~~略~~~~~~~~~~~~~~ -->

<!-- カートの中身変更ボタン -->
<tr>
	<td colspan="6" class="actions">

		<?php if ( wc_coupons_enabled() ) { ?>
			<div class="coupon">
				<label for="coupon_code"><?php esc_html_e( 'Coupon:', 'woocommerce' ); ?></label> <input type="text" name="coupon_code" class="input-text" id="coupon_code" value="" placeholder="<?php esc_attr_e( 'Coupon code', 'woocommerce' ); ?>" /> <button type="submit" class="button" name="apply_coupon" value="<?php esc_attr_e( 'Apply coupon', 'woocommerce' ); ?>"><?php esc_attr_e( 'Apply coupon', 'woocommerce' ); ?></button>
				<?php do_action( 'woocommerce_cart_coupon' ); ?>
			</div>
		<?php } ?>

		<button type="submit" class="button" name="update_cart" value="<?php esc_attr_e( 'Update cart', 'woocommerce' ); ?>"><?php esc_html_e( 'Update cart', 'woocommerce' ); ?></button>

		<?php do_action( 'woocommerce_cart_actions' ); ?>

		<?php wp_nonce_field( 'woocommerce-cart', 'woocommerce-cart-nonce' ); ?>
	</td>
</tr>

<!-- ~~~~~~~~~~~~~~略~~~~~~~~~~~~~~ -->

<?php do_action( 'woocommerce_after_cart_contents' ); ?>
		</tbody>
	</table>
<?php do_action( 'woocommerce_after_cart_table' ); ?>
</form>

以下jsです。
「初期のクリックイベント」と「ajaxロード後のクリックイベント時」を書いています。

「ajax後のクリックイベント」が2回実行されるので、
2個プラス、2個マイナスみたいになってしまいます。

  //初期クリックイベント
  var $cart_count = $('.shop__num'),
      $count_now = $('.shop .qty'),
      $count_down = $('.cart__count--down'),
      $count_up = $('.cart__count--up');

  var step = 1;
  var min = 1;
  var max = 100;

  $count_down.each(function(){
    $(this).on('click', function() {
      console.log('-');
      var num = $(this).next('.quantity').find('input').val();
      num--;
      if ( num < min ) {
        num = min;
      };
     $(this).next('.quantity').find('input').val(num);
      $('[name=update_cart]').prop({'disabled': false, 'aria-disabled': false });
      jQuery("[name='update_cart']").trigger("click");
    });
  });

  $count_up.on('click', function() {
    console.log('+');
    var num = $(this).prev('.quantity').find('input').val();
    num++;
    if ( max < num ) {
      num = max;
    };
    $(this).prev('.quantity').find('input').val(num);
    $('[name=update_cart]').prop({'disabled': false, 'aria-disabled': false });
    jQuery("[name='update_cart']").trigger("click");
  });

  //ajaxロード後のイベント
  jQuery(document).ajaxComplete(function(){
    console.log('ajax!!!');
    var $cart_count = $('.shop__num'),
        $count_now = $('.shop .qty'),
        $count_down = $('.cart__count--down'),
        $count_up = $('.cart__count--up');

    var step = 1;
    var min = 1;
    var max = 100;

    $count_down.each(function(){
      $(this).on('click', function() {
        console.log('ajax--');
        var num = $(this).next('.quantity').find('input').val();
        num --;
        if ( num < min ) {
          num = min;
        };
        console.log('ajaxマイナスした');////1クリックでこいつが2回logされる。
       $(this).next('.quantity').find('input').val(num);
        $('[name=update_cart]').prop({'disabled': false, 'aria-disabled': false });
        jQuery("[name='update_cart']").trigger("click");
      });
      return false;
    });

    $count_up.on('click', function() {
      console.log('ajax++');
      var num = $(this).prev('.quantity').find('input').val();
      num ++;
      if ( max < num ) {
        num = max;
      };
      console.log('ajaxプラスした');////1クリックでこいつが2回logされる。
      $(this).prev('.quantity').find('input').val(num);
      $('[name=update_cart]').prop({'disabled': false, 'aria-disabled': false });
      jQuery("[name='update_cart']").trigger("click");
      return false;
    });
  });

以上がコードになります、なぜ「ajaxロード後のイベント」の中身は2回実行されてしまうのでしょうか？
ご教授いただけると幸いです。(情報の不足があればおっしゃってください)

よろしくお願いします。

Comments

[umau]

form タグと、送信処理を行っているところのスクリプトを示してもらえますか。

[Yariii]

formタグ追記しました。送信処理は、<!--カートの中身変更ボタン-->にあるsubmitタイプのbuttonが担っているようです。

[umau]

送信処理はプラグインがイベント追加してるのかもしれないですね。submit押下だけなら普通にformのpost処理になってAjaxじゃない事になりますし。wooccomerceを知らないので分からないですが。
送信処理側の可能性は見切れないので無視することにして、見て分かる内容で回答してみます。

Answer 1

https://johnhashim.com/posts/add-plus-and-minus-ajax-buttons-to-woocommerce-quantity-inputs/

こちらの記事を参考に解決できました。ちょっと別のアプローチです。
woocommerceのglobalフォルダに、数量変更する共通UIがあり、そこに+-ボタンを作成するイメージです。
jQueryは記事とおりfunctions.phpに追記しました。(woocommerceの場合phpでフックをかけないとjsが理想通り動かないのかな...)

Answer 2

ajaxCompleteの中と外の2カ所でクリックイベントが付けられているので、一度ajaxCompleteの中を通るとクリックイベントが2個になります。

で、そのどちらのイベント関数も最後にupdate_cart ボタンのクリックをトリガーしています。
1クリックで2個とも実行され、2回updaete_cartがトリガー実行されてしまう、という事に思えます。

※通常、標準のaddEventListnerは同じイベントは1つしか付けれないので、clickイベントを2回付けると上書きされて1個になるんですが、jQueryのon()でのイベント追加は複数バインドが可能で、バインドした順にリスナーが呼び出されます。(jQueryが内部にリスナー関数を保持する)

ajaxComplete内でのイベント追加が不要なんじゃないでしょうか。

Comments

[Yariii]

ajaxロードされたあと、なぜか外側のjsイベントが効かなくなったんですよね、、なのでajaxCompleteの内側にイベント処理を追記したのですが、logを使ってコンソール確認してみるとやはり外側のクリックイベントは2回目以降は効いていないみたいです。

ちょっと全く別の代替案ですが、理想の動きにできた方法があったので、今回はこちらで解決済みにさせていただこうと思います。
ご回答ありがとうございました！