Laravel7中Ajax更新商品数量后无法再次请求的解决咨询

问题根源 #

你遇到的核心问题是事件绑定失效：首次页面加载时，直接给.btn-update-quantity元素绑定的blur事件只对当时存在的DOM元素生效。但通过$('#table_refresh').load(href)更新内容后，原来的输入框被新生成的元素替换，新元素没有绑定任何事件，导致后续操作无法触发Ajax请求。

另外代码里存在变量名错误：定义的是var cantidad = $("#quantity_"+ id).val();，但后续Ajax逻辑中使用的是quantity，这会触发变量未定义的报错，需要先修正。

解决方案：使用事件委托 #

将事件绑定到不会被替换的父元素（比如#table_refresh或更上层的document），通过事件委托的方式监听子元素的blur事件，这样无论DOM如何更新，新生成的元素都能正常触发事件。

修改后的JS代码：

$(document).ready(function(){
    // 事件委托绑定到#table_refresh容器
    $("#table_refresh").on('blur', '.btn-update-quantity', function(e){
        var id = $(this).data('id');
        var href = '/admin/updateservicios';
        // 统一变量名，避免未定义错误
        var quantity = $("#quantity_"+ id).val();
        $.ajax({
            url: href + "/" + id + "/" + quantity,
            data: { 'id' : id, 'quantity':quantity },
            type: "GET",
            cache: false,
            success: function() {
                // 仅加载目标页面中#table_refresh内部的内容，避免DOM嵌套混乱
                $("#table_refresh").load(href + " #table_refresh > *");
            }
        }); 
    }); 
});

关键改动说明 #

1. 事件委托逻辑：$("#table_refresh").on('blur', '.btn-update-quantity', function(){...})
   • 把事件绑定到#table_refresh父容器，当内部的.btn-update-quantity元素触发blur事件时，事件会冒泡到父容器触发处理函数，新生成的元素也能生效。
2. 变量名修正：统一使用quantity（或cantidad），消除变量未定义的报错。
3. 优化.load()方法：$("#table_refresh").load(href + " #table_refresh > *")
   • 只加载目标页面中#table_refresh内部的内容，避免将整个页面嵌套到当前容器中，防止DOM结构混乱。

补充提示 #

确保Laravel路由/admin/updateservicios/{id}/{quantity}（对应GET请求）能正确处理参数，且返回的页面片段中包含结构正确的.btn-update-quantity输入框元素。

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