Form submit confirmation does not work in jQuery `ready()`

Working in Django, I am trying to update the items of a database through submitting a form. I need a confirmation dialog before submission. These are my lines on related code:

$(document).ready(function(){
        setInterval(function(){
            $.ajax({
                type: 'GET',
                url: 'http://127.0.0.1:8000/update_in_line_orders',
                success: function(response){
                    $('#in-line-list').empty();
                    console.log('res');
                    let temp = ""
                    for (let i in response.in_line_orders_list){
                        temp = temp +
                        '<li>' +
                            '<h2>' +
                                'Table No:' + response.in_line_orders_list[i]['table-no'] +
                            '</h2>' +
                            '<div>'
                        for (let j in response.in_line_orders_list[i]['order']){
                            temp = temp +
                            '<div>' +
                            '<p class="order-item-team">' + response.in_line_orders_list[i]['order'][j]['item_title'] + '</p>' +
                            '<p class="order-item-team">' + '........' + '</p>' +
                            '<p class="order-item-team">' + response.in_line_orders_list[i]['order'][j]['item_quantity'] + '</p>' +
                            '<p class="order-item-team">' + '........' + '</p>' +
                            '<p class="order-item-team">' + response.in_line_orders_list[i]['order'][j]['item_price_rials'] + '</p>' +
                            '</div>'
                        }
                        temp = temp +
                        '</div>' +
                        '<p class="order-item-total-team">' + 'Total' + response.in_line_orders_list[i]['total_price_rials'] + '</p>' +
                        '<p class="date">' + response.in_line_orders_list[i]['date'] + '</p>' +
                        '<p class="time">' + response.in_line_orders_list[i]['time'] + '</p>' +
                        '<form id="' + String(response.in_line_orders_list[i]['order_id']) + '" method="POST">' +
                        '{% csrf_token %}' +
                        '<button style="font-family: Tahoma; border: none; border-radius: 20px; background-color: rgba(146,194,198,255); color: #A1662F;" name="delivered-to-table-id" value="' + response.in_line_orders_list[i]['order_id'] + '">' +
                        'Delivered!' +
                        '</button>' +
                        '</form>' +
                        '</li>'
                    }
                    $("#in-line-list").append(temp)
                },
                error: function(response){
                    console.log('err');
                    console.log(response);
                }
            })
        }, 3000);
        
    });

I have tried handling the issue using DOM event listeners and jQuery event handlers inside and outside the for loops, but I have got nothing. How is this possible?

Thank you, honestly.

Вернуться на верх