Ajax only running 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.

Does the content in `load()` replace all the `substitut` buttons that existed in inital page load? — charlietfl, May 30 '20 at 15:55
Yes, it loads the div with all the `substitut` button in it. — Toto Briac, May 30 '20 at 15:57
In that case see the duplicate link above and also [Understanding Event Delegation](https://learn.jquery.com/events/event-delegation/) — charlietfl, May 30 '20 at 15:58
So I should write `$(".substitut").on('click', dynamicChild, function(event) {})`. Is my dynamicChild #fav_list? — Toto Briac, May 30 '20 at 16:07
No.... more like `$("#fav_list").on('click', '.substitute', func...` since `$("#fav_list")` will always exist in page — charlietfl, May 30 '20 at 16:08

Ajax only running once in Django

0 Answers0