On success, div is loading only once through AJAX

Question

I am trying to reload the table on every successful quantity change and row deletion in add to cart using ajax. But the table is getting reloaded only once after that no change is being observed.

Here is the code:

<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");
            }
        });
    }
});

Try replacing `var ele = $(this);` to `var ele = $(e.target);` — Miller Cy Chan, Aug 31 '21 at 08:23
get requests cache..... if your buttons are in the code you are refreshing, no events will be bound. — epascarello, Sep 01 '21 at 02:33
https://stackoverflow.com/questions/168963/stop-jquery-load-response-from-being-cached and https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — epascarello, Sep 01 '21 at 02:36

Miller Cy Chan · Answer 1 · 2021-09-01T02:30:43.700

Button id b1 can be clicked only once, id b2 can be live clicked.

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>

On success, div is loading only once through AJAX

1 Answers1