如何绑定ajaxComplete到对应点击元素避免跨元素触发重复追加操作

问题根源 #

• 重复绑定事件：每次点击ajax_add_to_cart按钮时，都会给document新增一个ajaxComplete监听回调，没有做解绑逻辑，后续任意Ajax请求完成都会触发所有历史绑定的回调
• 全局选择器匹配：用jQuery('.added_to_cart')选择元素时会匹配页面上所有符合条件的元素，不会限制在当前点击的产品范围内

最优解决方案（推荐） #

WooCommerce添加到购物车的Ajax请求完成后，会自动触发专属的added_to_cart自定义事件，无需自己监听全局ajaxComplete，天然可以拿到当前触发的产品对应节点，不会出现跨产品触发的问题：

jQuery(document).on('added_to_cart', function(e, fragments, cart_hash, $button) {
    // $button 为当前点击的加购按钮对象
    // 仅在当前按钮所在的产品容器内查找added_to_cart元素，不会匹配其他产品
    const $addedTag = $button.closest('div').find('.added_to_cart');
    // 追加前判断是否已存在结账按钮，避免重复添加
    if ($addedTag.length > 0 && $addedTag.next('.checkout-btn').length === 0) {
        $addedTag.after('<a href="/checkout/" class="added_to_cart wc-forward checkout-btn">Go to Checkout</a>');
    }
});

该方案不需要给加购按钮绑定click事件，全局仅绑定一次事件监听即可，自动适配所有产品的加购操作。

若必须使用ajaxComplete实现 #

如果有特殊场景必须监听ajaxComplete，可以按以下逻辑修改，避免重复触发：

jQuery('.ajax_add_to_cart').click(function() {
    const $currentBtn = jQuery(this);
    // 用one()方法绑定监听，触发一次后自动解绑，避免残留多余监听
    jQuery(document).one('ajaxComplete', function(e, xhr, settings) {
        // 校验请求类型，仅处理WooCommerce加购的Ajax请求，过滤其他无关请求
        if (settings.url.includes('?wc-ajax=add_to_cart')) {
            const $addedTag = $currentBtn.closest('div').find('.added_to_cart');
            if ($addedTag.length > 0 && $addedTag.next('.checkout-btn').length === 0) {
                $addedTag.after('<a href="/checkout/" class="added_to_cart wc-forward checkout-btn">Go to Checkout</a>');
            }
        }
    });
});

关键改动说明 #

• 用one()代替on()绑定ajaxComplete事件，回调触发一次后自动销毁
• 存储当前点击的按钮对象，后续仅在该按钮的父容器内查找元素，不会匹配其他产品节点
• 增加请求地址校验，过滤无关Ajax调用
• 追加前做存在性判断，避免同一位置重复追加按钮

内容的提问来源于stack exchange，提问作者Demian