AJAX 触发多次后重新加载功能答案

【问题标题】：Reload function after AJAX fires several timesAJAX 触发多次后重新加载功能
【发布时间】：2023-03-03 06:52:21
【问题描述】：

在 WordPress Woocommerce 中，购物车通过 AJAX 和我正在使用脚本将+/- 按钮实现到数量字段。 

使用 AJAX 重新加载购物车后，该功能不再对购物车产生影响，因为元素已重新加载。 

为了防止这种情况，我使用ajaxComplete 作为触发器来重新加载函数，但是当我点击+ 按钮时，输入字段会增加5 倍。  

使用警报进行调试显示增量被+1 触发了 5 次，而不是直接添加 5。

也许你可以看到问题：

jQuery(document).on("ready ajaxComplete",function($){ 

    function quantityPlusMinus() {

        function releaseUpdateCartButton() {
            if (jQuery( "input[name='update_cart']" ).length) {
                if (jQuery( "input[name='update_cart']" ).is(':disabled')) {
                    jQuery( "input[name='update_cart']" ).prop("disabled", false); 
                }
            }
        }

        jQuery('div.quantity').on( 'click', '.plus, .minus', function() {
            var qty = jQuery( this ).closest( 'div.quantity' ).find( '.qty' );
            var val   = parseFloat(qty.val());
            var max = parseFloat(qty.attr( 'max' ));
            var min = parseFloat(qty.attr( 'min' ));
            var step = parseFloat(qty.attr( 'step' ));

            // Change the value if plus or minus
            if ( jQuery( this ).is( '.plus' ) ) {
               if ( max && ( max <= val ) ) {
                  qty.val( max ).change();
               } else {
                  qty.val( val + step ).change();
                  releaseUpdateCartButton();
               }
            } else {
                if ( min && ( min >= val ) ) {
                    qty.val( min ).change();
                } else if ( val > 1 ) {
                    qty.val( val - step ).change();
                    releaseUpdateCartButton();
                }
            }
        });
    }
    quantityPlusMinus();
});

【问题讨论】：

尝试更改为静态元素绑定$(document).on('click', '.quantity .plus, .quantity .minus', ...。它解决了你的问题吗？
您的问题是ajaxComplete 事件。它捕获所有 ajax 事件，并且每个新请求都会再次运行您的函数。这意味着它会一遍又一遍地绑定点击事件。
@Justinas，不幸的是没有改变。 @harry，有没有办法加载脚本然后仅用于最后一个事件触发器？用于刷新的 woocommerce ajax 事件是“updated_cart_totals”。但是jQuery(document).on("ready updated_cart_totals",function($){ 也是同样的错误，只是有 2 个多重增量而不是 5

标签： javascript jquery ajax wordpress woocommerce

【解决方案1】：

让它运行。我不知道是否有更聪明的方法可以做到这一点，但它确实有效。

如果有人在寻找解决方案：

function inputPlusMinus(ftype) {

    // Release the UpdateCartButton when click on +/- button in cart
    function releaseUpdateCartButton() {
        if (jQuery( "input[name='update_cart']" ).length) {
            if (jQuery( "input[name='update_cart']" ).is(':disabled')) {
                jQuery( "input[name='update_cart']" ).prop("disabled", false); 
            }
        }
    }

    // Check which type of function is needed, for all or just for cart
    if ( ftype == 'cart') {
        var where = '.woocommerce-cart-form div.quantity';
    }
    else {
        var where = 'div.quantity';
    }
    // Action if button is clicked
    jQuery(where).on( 'click', '.plus, .minus', function() {
        var qty = jQuery( this ).closest( 'div.quantity' ).find( '.qty' );
        var val   = parseFloat(qty.val());
        var max = parseFloat(qty.attr( 'max' ));
        var min = parseFloat(qty.attr( 'min' ));
        var step = parseFloat(qty.attr( 'step' ));

        // Change the value if plus or minus
        if ( jQuery( this ).is( '.plus' ) ) {
           if ( max && ( max <= val ) ) {
              qty.val( max ).change();
           } else {
              qty.val( val + step ).change();
              releaseUpdateCartButton();
           }
        } else {
            if ( min && ( min >= val ) ) {
                qty.val( min ).change();
            } else if ( val > 1 ) {
                qty.val( val - step ).change();
                releaseUpdateCartButton();
            }
        }
    });
}        

// Run function when page loading    
jQuery(document).on("ready",function($){ 
    inputPlusMinus();
});
// When cart is reloaded add new functionality to cart inputs
jQuery(document).on("updated_cart_totals",function($){ 
    inputPlusMinus('cart');
});

【讨论】：