Ajax Django 添加按钮未在第一次单击时添加

Posted 2023-05-08

【中文标题】Ajax Django 添加按钮未在第一次单击时添加

【英文标题】：Ajax Django add button not adding on first click

【发布时间】：2021-09-09 13:55:27

【问题描述】：

所以我在 Django 中有一个动态呈现的表格，表格中的项目代表订单项目，因此对于我添加到购物车的每个订单项目，它将显示在我的购物车页面的表格中。现在我有一个数量、一个产品名称、订单项目总数等。现在我使用两个按钮，加法和减法。 这是一个代码，您可以了解这个想法。

                <tbody>                        
                    % for order in orders %
                  <tr>
                    <th scope="row">
                        <div class="order-quantity">
                            <span class="order_quantity">order.quantity</span>
                                <button data-url="% url 'add' order.id %" class="edit-quantity plus" id="plus">+</button>
                                <button data-url="% url 'subtract' order.id %" class="edit-quantity subtract" id="subtract">-</button>
                        </div>
                    </th>
                    <td><img src="order.item.product_image.url"   ></td>
                    <td>order.item.product_name</td>
                    <td> <span>&#8369;</span>  order.total_item_price</td>
                  </tr>
                    % endfor %
                </tbody>
                </table>

现在请注意，我有两个按钮，每个按钮都有一个数据 url，这样 Jquery 就可以对 Django 中的指定 url 进行 AJAX 调用。一切正常，但是当我单击添加按钮时，在我的日志中显示该项目尚未更改，而只是打印出来。但是当我第二次点击时，动作只是发生了，但不是在第一次点击期间。如何解决？

这是一个例子。

"id": 26, "total_item_price": 6000.00, "user_id": 1, "quantity": 4, "item_id": 1, "cart_id": 11, "item": "product_name": " Nike", "product_date_added": "2021-06-24 09:59:45.449808+00:00", "product_id": 1, "product_image": "nike.jpg", "product_stock_quantity": 6, "product_price": 1500.00, "product_description": "Nike"
"id": 26, "total_item_price": 6000.00, "user_id": 1, "quantity": 4, "item_id": 1, "cart_id": 11, "item": "product_name": " Nike", "product_date_added": "2021-06-24 09:59:45.449808+00:00", "product_id": 1, "product_image": "nike.jpg", "product_stock_quantity": 6, "product_price": 1500.00, "product_description": "Nike"
[26/Jun/2021 22:36:32] ←[m"GET /add/26 HTTP/1.1" 200 371←[0m

这是我的 jquery sn-p

 $(document).ready(function() 

        $("tbody").on('click', '.edit-quantity', function() 
            var quantity =$(this).closest("tr").find("span.order_quantity")   

            $.ajax(
                url : $(this).data("url"),

                success : function(response) 
                    data = $.parseJSON(response.order)
                    console.log(data.quantity)                        
                    quantity.text(data.quantity)
                    
        
                    
                 
            )
        )

    )

【参考方案1】：

我认为您必须重复您的事件点击进入您的响应 AJAX 以获取新元素。 示例：

// Event click for the DOM Elements already in your page.
$('.edit-quanity').on('click', function() 
    editQuantity();


ajaxMethod = function (url, data) 
    $.ajax(
        headers: 'X-CSRFToken': token,
        method: method,
        url: url,
        data: data,
    ).then(response () 
        // Event click for the new element
        $('.edit-quanity').on('click', function() 
            editQuantity();
        
    )

editQuantity = function () 
    ajaxMethod(url, data);

希望对你有帮助。