如何让AJAX同时识别手动输入和增减按钮触发的输入框数值变更

问题核心原因 #

你当前的AJAX逻辑仅绑定了keyup事件，仅会在用户通过键盘操作输入框时触发。而通过增减按钮调用jQuery的val()方法修改输入框值时，不会自动触发输入框的任何交互事件，因此AJAX逻辑不会执行。

所需修改点 #

• 调整AJAX绑定的事件，将仅监听keyup改为同时监听input+change事件，覆盖手动输入、粘贴、代码赋值等所有值变更场景，同时改用事件委托写法适配动态加载的购物车元素，避免重复绑定。
• 在增减按钮修改完输入框值后，主动触发对应输入框的变更事件。
• 移除重复的事件绑定逻辑，避免同一个按钮绑定多次点击事件造成异常。

修改后完整可运行代码 #

JS代码 #

$(function() {
    // 减按钮逻辑
    $(document).on('click', '.min', function(){
        var $qtyInput = $(this).siblings(".quantity");
        var currentVal = parseInt($qtyInput.val());
        if (currentVal != 1) {
            $qtyInput.val(currentVal - 1).trigger('change'); // 修改完主动触发变更事件
        }
    });
    // 加按钮逻辑
    $(document).on('click', '.plus', function(){
        var $qtyInput = $(this).siblings(".quantity");
        var currentVal = parseInt($qtyInput.val());
        $qtyInput.val(currentVal + 1).trigger('change'); // 修改完主动触发变更事件
    });

    // 数量变更触发AJAX更新（事件委托写法，动态加载的元素也生效）
    $(document).on('input change', '.quantity', function(evt) {
        evt.preventDefault();
        var formData = $('input[name^="qtyupdate"]').serializeArray();

        var url = "item_cart.php";
        $.ajax({
            url: url,
            type: "POST",
            data: formData,
            cache: false,
        })
        .done(function(data) {
            let res = JSON.parse(data);
            if(res.status){
                $("#wrapp-basket").load(" #wrapp-basket").fadeIn('slow');
                $("#qty").load(" #qty").fadeIn('slow');
                $('.alert-success').fadeIn();
                $('.alert-success').html(res.message).delay(2000).fadeOut(2000);
            } else {
                $('.alert-danger').fadeIn();
                $('.alert-danger').html(res.message).delay(2000).fadeOut(2000);
            }
        })
        .fail(function( jqXHR, textStatus ) {
            console.log(jqXHR.responseText);
            console.log("Request failed: " + textStatus );
        })
    });
});

HTML代码无需修改，保持原有写法即可。 #

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