使用AJAX修改/删除购物车后表格仅重载一次如何解决

问题原因 #

你使用的直接绑定事件的写法仅对页面初始加载时已存在的DOM元素生效，调用$("#cart").load(" #cart")重载购物车容器后，原有绑定了事件的元素会被全部替换，新渲染出来的数量输入框、删除按钮没有绑定对应事件，后续操作自然不会触发响应。

解决方案 #

改用jQuery事件委托机制，将事件绑定到不会被重载替换的父级元素上（可选用document、body或其他固定的外层容器），事件会自动作用于后续动态生成的匹配子元素。

修改后的代码如下：

<script type="text/javascript">
// 事件委托绑定change事件，适配动态生成的数量修改元素
$(document).on('change', '.update-cart', function (e) {
    e.preventDefault();
    var ele = $(this);
    $.ajax({
        url: '{{ route('update.cart') }}',
        method: "patch",
        data: {
            _token: '{{ csrf_token() }}', 
            id: ele.parents("tr").attr("data-id"), 
            quantity: ele.parents("tr").find(".quantity").val()
        },
        success: function (response) {
            $("#cart").load(" #cart");
        }
    });
});

// 事件委托绑定click事件，适配动态生成的删除元素
$(document).on('click', '.remove-from-cart', function (e) {
    e.preventDefault();
    var ele = $(this);
    if(confirm("Are you sure want to remove?")) {
        $.ajax({
            url: '{{ route('remove.from.cart') }}',
            method: "DELETE",
            data: {
                _token: '{{ csrf_token() }}', 
                id: ele.parents("tr").attr("data-id")
            },
            success: function (response) {
                $("#cart").load(" #cart");
            }
        });
    }
});
</script>

如果页面存在比document更靠近购物车容器的固定外层元素，替换代码中的document为该元素的选择器可获得更好的性能。

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