How to track event on element in django ajax after it has been rendered?

Question

Django

Good day friends!
I recently started learning Django. I am making an online store. The task is to implement an online store. At this stage, I am implementing the ShoppingCart jQuery Ajax. I almost coped with the task, but there is one thing, but when I add a product to the cart or remove it, I redraw the cart block:

<table class="table table-striped table-hover"> 
                                        <thead>
                                            <th>Имя товара</th>   
                                            <th>Цена</th>    
                                            <th>Колич.</th>
                                            <th>Действие</th> 
                                        </thead>
                                        <tbody id="cartList">
                                        {% if shoppingCart.totalQuantity %}
                                            {% for key, value in productsInCart.items %}
                                                <tr> 
                                                    <td> {{value.name}} </td>
                                                    <td>{{value.price}}</td>
                                                    <td>{{value.quantity}}</td>
                                                    <td class="text-right">
                                                        <a action="{% url 'deleteFromCart' %}" class="btn deleteCart" id="{{key}}"><i class="fas fa-trash-alt"></i></a>
                                                        </td>
                                                </tr>
                                            {% endfor %}
                                        {% endif %}
                                        </tbody>
                                        <tfoot><td colspan="4">
                                        <a href="#" class="btn">Оформить заказ</a>
                                        </td></tfoot> 
                                    </table>

jQuery logic:

function getCookie(name) {
        var cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
    var deleteUrl=$('.deleteCart').attr('action');
    var CSRFTokenValue=getCookie('csrftoken');
    console.log(deleteUrl);
    console.log(CSRFTokenValue);
    $('.deleteCart').click( function(e){
        e.preventDefault();
        var myData={};
        myData.productId=$(this).attr('id');
        deleteUrl=$(this).attr('action');
        console.log(deleteUrl);
        myData['csrfmiddlewaretoken']=CSRFTokenValue;
        console.log(CSRFTokenValue);
        var myUrl=$(this).attr('action');
        $.ajax({
            url: myUrl,
            type: 'POST',
            data: myData,
            cache: true,
            success: function(result){
                $("#cartList").html('');
                $('.cartprice').text(result.totalPrice);
                for (var key in result.products) {
                    console.log(key);
                    $('#cartList').append('<tr> <td>'+result.products[key].name+
                '</td>  <td>'+result.products[key].price+'</td>  <td>'+result.products[key].quantity+
                '</td> <td class="text-right"><a action="'+myUrl+'" class="btn deleteCart" id="'+key+'"><i class="fas fa-trash-alt"></i></a> </td> </tr>');
                }
            },
            error: function(result){
                alert("Missing some error: "+result);
            }
        });
    });
    $('.addToCart').click(function(e){
        e.preventDefault();
        var myData={};
        myData.productId=$(this).children('.basketBtn').attr('id');
        var csrfToken=$(this).children('input[name="csrfmiddlewaretoken"]').val();
        myData['csrfmiddlewaretoken']=csrfToken;
        console.log(deleteUrl);
        console.log(csrfToken);
        var myUrl=$(this).attr('action');
        
        $.ajax({
            url: myUrl,
            type: 'POST',
            data: myData,
            cache: true,
            success: function(result){
                $("#cartList").html('');
                $('.cartprice').text(result.totalPrice);
                for (var key in result.products) {
                    $('#cartList').append('<tr> <td>'+result.products[key].name+
                '</td>  <td>'+result.products[key].price+'</td>  <td>'+result.products[key].quantity+
                '</td>  <td class="text-right"><a action="'+deleteUrl+'" class="btn deleteCart" id="'+key+'"><i class="fas fa-trash-alt"></i></a> </td> </tr></tr>');
                  }
                
            },
            error: function(result){
                alert("Missing some error: "+result);
            }
        });
    });

So, after rendering the table, jQuery stops seeing my links with the .deleteCart class.
Suggest a solution. Thank you in advance.

Answer 1

Immediately I say I didn’t dig the code, but judging by the description, I’m 99% sure that the problem is solved by delegation.
Those. instead of: do
ps django has nothing to do with it