adminlte分页问题

Question

问题遇到的现象和发生背景

adminlte分页后，第一页，删除功能正常，第二页以后删除不了，找不到DELETE_ID

问题相关代码，请勿粘贴截图

{% extends 'layout/base.html' %}
{% block title %}部门列表{% endblock %}
{% block content %}
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">

            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="#">首页</a></li>
                    <li class="breadcrumb-item active">部门列表</li>
                </ol>
            </div>
        </div>
    </div><!-- /.container-fluid -->

    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">
                            <button id="btnAdd" type="button" class="btn btn-primary" data-toggle="modal"
                                    data-target="#modal-default">
                                新建部门
                            </button>
                        </h3>
                    </div>
                    <!-- /.card-header -->
                    <div class="card-body">
                        <table id="example1" class="table table-bordered table-striped">
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>名称</th>
                                <th>所属部门</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for obj in queryset %}
                                <tr uid="{{ obj.id }}">
                                    <td>{{ obj.id }}</td>
                                    <td>{{ obj.name }}</td>
                                    <td>{{ obj.parent.name }}</td>
                                    <td>
                                        <button uid="{{ obj.id }}" type="button" class="btn btn-primary btn-edit"
                                                data-toggle="modal"
                                                data-target="#modal-primary">
                                            编 辑
                                        </button>
                                        <button uid="{{ obj.id }}" type="button" class="btn btn-danger btn-delete"
                                                data-toggle="modal"
                                                data-target="#modal-danger">
                                            删 除
                                        </button>
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    <!-- /.card-body -->
                </div>
                <!-- /.card -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </div>
    <!-- /.container-fluid -->

    <div class="modal fade" id="modal-default">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">新建部门</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="formAdd">
                        <div class="clearfix">
                            {% for field in form %}
                                <div class="col-xs-6">
                                    <div class="form-group" style="position:relative;margin-bottom: 20px">
                                        {{ field.label }}
                                        {{ field }}
                                        <span class="error-msg" style="color:red;position:absolute;"></span>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    </form>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
                    <button id="btnSave" type="button" class="btn btn-primary">确 定</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->

    <div class="modal fade" id="modal-danger">
        <div class="modal-dialog">
            <div class="modal-content bg-danger">
                <div class="modal-header">
                    <h4 class="modal-title">删除部门</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>是否删除数据？</p>
                    <p>此操作将会把删除数据关联的所有信息全部删除。</p>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-outline-light" data-dismiss="modal">取 消</button>
                    <button id="btndelete" type="button" class="btn btn-outline-light">删 除</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->




{% endblock %}
{% block js %}
    <script>
        $(function () {

            var DELETE_ID;
            var EDIT_ID;
            bindBtnSaveEvent();
            bindBtnDelEvent();
            bindBtnDeleteEvent();
        });

        function bindBtnSaveEvent() {
            $("#btnSave").click(function () {
                $(".error-msg").empty()
                doAdd();
            })
        }

        function doAdd() {
            $.ajax({
                url: "/department/add/",
                type: "POST",
                data: $("#formAdd").serialize(),
                dataType: "JSON",
                success: function (res) {
                    if (res.status) {
                        $("#formAdd")[0].reset();
                        $("#myModal").modal("hide")

                        location.reload();
                    } else {
                        $.each(res.error, function (name, errorList) {
                            $("#id_" + name).next().text(errorList[0]);
                        })
                    }
                }
            })
        }

        function bindBtnDelEvent() {
            $("btn-delete").click(function () {

                DELETE_ID = $(this).attr('uid');
            });
        }

        function bindBtnDeleteEvent() {
            $("#btndelete").click(function () {
                $.ajax({
                    url: "/department/delete/",
                    type: "get",
                    data: {
                        uid: DELETE_ID
                    },
                    datatype: "JSON",
                    success: function (res) {
                        if (res.status) {
                            $("tr[uid='" + DELETE_ID + "']").remove();
                            DELETE_ID = 0;
                            location.reload();
                        } else {
                            alert(res.error);
                        }
                    }
                })
            })
        }
    </script>
{% endblock %}

运行结果及报错内容

VM793:1 Uncaught ReferenceError: DELETE_ID is not defined

我的解答思路和尝试过的方法

我想要达到的结果

能正常删除