Ajax running only once in Django

Question

I have a list of saved items that the user can delete if he wants. They are inside a #div, a delete button next to each item. If I press the delete button after the favorite items list page is loaded, it works fine.

But, if I want to delete another item, as I press on the delete button, the delete function would not run.

There is my AJAX:

$(".substitut").on('click', function(event) {
    event.preventDefault();      
    var product = $(this).val();               
    var url = '/register/delete/';   
    $.ajax({        
        url: url,        
        type: "POST",
        data:{
            'product': product,            
            'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val()
        },
        datatype:'json',
        success: function(data) {
          if (data['success'])            
            $("#fav_list").load(" #fav_list > *");       
        }
    }); 
});

and my HTML:

<button type ='button' class=' btn substitut' value='{{ saved.id }}'>{% csrf_token %}<i class='fas fa-trash-alt'></i></button>

One quick trick I found was to add location.reload(true); after the div refresh but the point of all of this is not having my page refreshing.

Alternative: `$(".form_id").on("submit",function(e) { e.preventDefault(); const product = $(this).find(".substitut").val(); ...` INSTEAD of click — mplungjan, May 29 '20 at 08:41
I've tried the alternative with no luck. Should I get rid of the form and use the click event on the button? — Toto Briac, May 29 '20 at 10:01
I've changed my code as suggested, but now the Ajax runs only once. Question has been updated with my new code. — Toto Briac, May 30 '20 at 15:08
If the button is part of the page you load you need to do `$("#fav_list").on("click", ".substitut", function ...` — mplungjan, May 30 '20 at 16:08

Ajax running only once in Django

0 Answers0