ajax - 成功时，div 仅通过 AJAX 加载一次

Question

我正在尝试使用 ajax 在添加到购物车中的每次成功数量更改和行删除时重新加载表格。但是在没有观察到任何变化之后，表只会重新加载一次。

这是代码：

<script type="text/javascript">
$(".update-cart").change(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");
            //alert("This is working");
        }
    });
});
$(".remove-from-cart").click(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");
            }
        });
    }
});

Answer 1

按钮 id b1 只能点击一次，id b2 可以实时点击。

function why(e) {
        e.preventDefault();
        alert("You clicked " + e.target.id);
        $("#myDiv").html('<button id="b1" type="button">Click Me!</button><button id="b2" class="button" type="button">Click Me!</button>');
    }
    $("#b1").click(why);
    $(document).on("click", ".button", why);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myDiv">
  <button id="b1" type="button">Click Me!</button><button id="b2" class="button" type="button">Click Me!</button>  
</div>