Achill
@Achill
Недопрограммист)))

Как отследить событие по элементу в django ajax после его отрисовки?

Доброго времени суток друзья!
Недавно начал изучать Django. Делаю интернет магазин. Стоит задача реализовать интернет магазин. На данном этапе реализую ShoppingCart jQuery Ajax. С задачей почти справился но есть одно но когда я делаю добавление товара в корзину или его удаление я перерисовываю блок корзины:
<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 логика:
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);
            }
        });
    });

Так вот после отрисовки таблицы jQuery перестаёт видеть мои ссылки с классом .deleteCart.
Подскажите решение. Заранее благодарю.
  • Вопрос задан
  • 62 просмотра
Решения вопроса 1
tema_sun
@tema_sun
Сразу говорю код не копал, но судя по описанию уверен на 99%, что проблема решается делегированием.
Т.е. вместо:
$('.deleteCart').click( function(e){...
делайте
$('body').on('click', '.deleteCart', function(e){...


p.s. django тут ни при чем
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы